API文檔地址 https://docs.sencha.com/extjs/6.6.0/modern/Ext.html
下載庫文件 https://www.sencha.com/
build:壓縮後的Ext全部源碼(裏面分類存放) ext.js:核心文件,其中包含運行應用程序的所有功能。 ext-all.js:此文件包含在文件中沒有註釋的所有壓縮的代碼。 ext-all-debug.js:這是ext-all.js的未分級版本,用於調試目的。 ext-all-dev.js:此文件也未分級,用於開發目的,因爲它包含所有註釋和控制檯日誌,以檢查任何錯誤/問題。 ext-all.js:這個文件用於生產目的,主要是因爲它比任何其他小得多。 resources:Ext UI資源文件目錄,如CSS、圖片文件都存放在這裏。
classic:如果我們要使用桌面應用程序,那麼我們可以使用classic下的經典主題。 locale: 國際化文件 (locale-zh_CN.js:簡體) theme-triton:主題,扁平化、響應式
examples:提供使用ExtJs技術做出的小實例。
modern:如果我們要使用移動應用程序,那麼我們將使用現代主題modern。
實踐
一、手打編寫,瞭解下Ext
1、彈框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Extjs樣式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
<!--引入extjs核心庫-->
<script src="ext/ext-all.js"></script>
<script>
// alert("hello")
//在extjs框架初始化完成才執行
Ext.onReady(function () {
Ext.MessageBox.alert("溫馨提示","hello");
})
</script>
</head>
<body>
</body>
</html>
2、面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Extjs樣式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
<!--引入extjs核心庫-->
<script src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
//創建面板對象,第一種 通過new創建
var panel=new Ext.Panel({
width:300,
height:400,
title:'標題',
html:'hello',
//必須要進行渲染纔會顯示
renderTo:Ext.getBody()
})
//第二張 使用create方法來創建
Ext.create('Ext.Panel',{
width:300,
height:400,
title:'標題',
html:"world",
//必須要進行渲染纔會顯示
renderTo:'dd'
})
//第三種 使用Ext.create和xtype
var panel3=Ext.create({
xtype:'panel',
width:300,
height:400,
title:'標題',
html:'你好',
//監聽 第一種方法
listeners:{
close:function () {
console.log("關閉。。。")
}
}
//必須要進行渲染纔會顯示
// renderTo:Ext.getBody()
})
//監聽 第二種方法
panel3.on('close',function () {
console.log("關閉2.。。")
})
//監聽 第三種方法
panel3.addListener('close',function () {
console.log("關閉3.。。")
})
//渲染延遲
panel3.render(Ext.getBody())
//查看拖拽屬性
console.log(panel3.draggable);
//關閉
panel3.close();
})
</script>
</head>
<body>
<!--渲染位置-->
<div id="dd"></div>
</body>
</html>
3、list數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Extjs樣式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
<!--圖標樣式-->
<link rel="stylesheet" type="text/css" href="ext/css/icon.css">
<!--引入extjs核心庫-->
<script src="ext/ext-all.js"></script>
<!--國際化文件-->
<script src="ext/classic/locale/locale-zh_CN.js"></script>
<script>
Ext.onReady(function () {
//創建一個store要使用的model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{name: 'username', type: 'string'},
{name: 'realname', type: 'string'},
{name: 'hiredate', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'state'}]
});
//創建數據源store
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
pageSize:'10',//每頁顯示10條,地址傳參用
proxy: {
type: 'ajax',
url: 'json/list.json',
reader: {
type: 'json',
rootProperty: 'result'
}
},
autoLoad: true //自動加載數據
});
//創建gridpanel
Ext.create('Ext.grid.Panel',{
title:'用戶管理',
iconCls:'user',//圖標
height:700,
store:myStore,
forceFit:true,//列寬自適應
columnLines:true,//列框線
renderTo:Ext.getBody(),
tbar: [
{ xtype: 'button', text: '新增',iconCls:'add',border:false,handler:function(){} },
{ xtype: 'button', text: '修改',iconCls:'edit',border:false,handler:function(){} },
{ xtype: 'button', text: '刪除',iconCls:'delete',border:false,handler:function(){} },
{ xtype: 'button', text: '刷新',iconCls:'reload',border:false,handler:function(){} },
],//頂部工具欄
bbar: { xtype:'pagingtoolbar',displayInfo:true,store:myStore},//底部{分頁;顯示隱藏信息;舊版本需要,展示右下角多少條}
columns:[
{ xtype:'rownumberer',width:30,align:'center'},
{ header:'用戶名',dataIndex:'username'},
{ header:'真實姓名',dataIndex:'realname'},
{ header:'入職時間',dataIndex:'hiredate'},
{ header:'電話',dataIndex:'phone'},
{ header:'狀態',dataIndex:'state',renderer:function(value){//指定函數,把value值轉換爲可顯示的內容
return value?"在職":"<font color='red'>離職</font>";
}}]
})
//創建formpanel
var formPanel = Ext.create('Ext.form.Panel', {
bodyPadding: 30,//外邊距
// width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'json/result.json',
// 表單域Fields將被豎直排列,佔滿整個寬度
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
name: 'id',
hidden: true
},{
fieldLabel: '用戶名',
name: 'username',
allowBlank: false //不允許爲空
},{
fieldLabel: '真實姓名',
name: 'realname'
},{
fieldLabel: '入職時間',
name: 'hiredate',
xtype: 'datefield',
format:'Y-m-d'
},{
fieldLabel: '電話',
name: 'phone'
},{
fieldLabel: '狀態',
name: 'state',
xtype: 'combobox',
store: new Ext.data.ArrayStore({
fields : ['value','text'],
data : [[true,'在職'],[false,'離職']]
}),
valueField:'value',
displayField:'text'
}],
// Reset and Submit buttons
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
formBind: true, //當表單驗證成功,按鈕啓用
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('提示', "保存成功");
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
});
//表單彈出框
var add=Ext.create('Ext.window.Window', {
title: '新增用戶',
height: 350,
width: 350,
layout: 'fit',
items: formPanel
}).show();
})
</script>
</head>
<body>
</body>
</html>
二、上面都是手打的,認識一下Ext,下面開始使用cmd生成項目。
這個是找的網上的,下面我使用公司人提供的方法。
1、sencha -sdk /G:\extjs6\ext-6.6.0 generate app MyApp /G:\Extjs6\Project 綠色:extjs6 解壓的位置 藍色:項目名 紅色:項目生成的位置 生成的是一個空白模板
2(1)、推薦使用根據模板生成項目:(推薦我用這個) sencha -sdk G:\extjs6\ext-6.6.0 generate app -s G:\extjs6\ext-6.6.0\templates\admin-dashboard Admin /G:\ext6
2(2)、根據模板生成項目後,修改app.json配置 (1)找到output配置項 修改base值"${ext.dir}/build/examples/admin-dashboard/${build.id}"改爲"${workspace.build.dir}/${build.environment}/${app.name}/${build.id}"
(2)引入中文語言包:找到"requires"配置 改爲"requires" : ["charts", "font-awesome", "ux", "locale"], "locale": "zh_CN",
3、進入項目目錄 執行 sencha app build。
4、查看。 執行sencha app watch ,瀏覽器輸入localhost:1841訪問