1 最簡單的Grid Panel
Grid Panel是ExtJS的核心部分之一，通過Grid Panel可以對數據顯示、排序、分組和編輯。Model和Store是Grid Panel處理數據的核心，每個Grid Panel都必須設置Model和Store。要創建Grid Panel，首先要定義Model，Model包括了Grid Panel所有需要顯示的字段，相當于數據庫中表字段的集合。Store可以看作是一行數據的集合或者是Model的實例集合，每個Store都包含一個或多個Model實例，Grid Panel顯示的數據都存儲在Store里面。Grid Panel通過Store獲取數據并顯示，Store則通過Proxy對數據進行讀取和保存。
下面創建一個Grid Panel用來顯示用戶的基本信息，包括用戶名、郵箱、手機號(name、email、phone)，首先創建用戶模型(User Model)。
Ext.define('User', { extend: 'Ext.data.Model', fields: [ 'name', 'email', 'phone' ] }); 接下來創建Store，Store是User的集合，包括多個User實例。
var userStore = Ext.create('Ext.data.Store', { model: 'User', //剛才創建的User Model data: [ { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' }, { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } ] }); Model和Store都創建好之后，就可以創建Grid Panel了。
Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: userStore, //綁定上面創建的Store width: 400, height: 200, title: 'Application Users', columns: [ { text: 'Name', width: 100, sortable: false, hideable: false, dataIndex: 'name' //Grid Panel中顯示的字段，必須要和User Model中的字段一致 }, { text: 'Email Address', width: 150, dataIndex: 'email', hidden: true }, { text: 'Phone Number', flex: 1, dataIndex: 'phone' } ] }); 最后創建的用戶Grid Panel如圖所示。
2 Grid Panel數據分組（Grouping）
只要在Store中設置groupField屬性，就可以對Grid Panel顯示的數據進行分組。假設公司有很多員工，需要對公司的員工在Grid Panel中按部門進行分組顯示。首先在Store中設置groupField屬性為department。
Ext.create('Ext.data.Store', { model: 'Employee', data: ..., groupField: 'department' //設置數據按照department分組 }); 然后在Grid Panel中添加grouping Feature，實現分組顯示效果。
Ext.create('Ext.grid.Panel', { ... features: [{ ftype: 'grouping' }] }); 分組顯示效果如下圖所示，點擊這里查看官方分組顯示代碼。
3 Grid Panel分頁顯示
當數據比較多一頁顯示不完的時候，就需要對數據進行分頁顯示。Grid Panel可以通過Paging Toolbar和Paging Scroller兩種方式實現分頁顯示顯示，Paging Toolbar有上一頁/下一頁按鈕，Paging Scroller是當Grid Panel滾動顯示到底部的時候動態加載數據。
要實現分頁顯示，首先要設置Store支持分頁，在Store中設置pageSize，pageSize默認是25。在reader中設置數據總數量totalProperty，分頁插件根據pageSize和totalProperty進行分頁。下面的代碼pageSize設置為4，totalProperty則從返回的json數據中total屬性獲取。
Ext.create('Ext.data.Store', { model: 'User', autoLoad: true, pageSize: 4, //設置每頁顯示的數據數量 proxy: { type: 'ajax', url : 'data/users.json', reader: { type: 'json', root: 'users', //指定從json的哪個屬性獲取數據，如果不指定，則從json的跟屬性獲取 totalProperty: 'total' //總數據數量 } } }); 假設json數據格式如下
{ "success": true, "total": 12, "users": [ { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" }, { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" }, { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" }, { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" } ] } Store的分頁已經設置完畢，下面在Grid Panel中實現Paging Toolbar分頁功能。
Ext.create('Ext.grid.Panel', { store: userStore, columns: ..., dockedItems: [{ xtype: 'pagingtoolbar', //在Grid Panel中添加paging toolbar store: userStore, //把paging toolbar的Store設置成和Grid Panel的Store一樣 dock: 'bottom', displayInfo: true }] }); Paging Toolbar的分頁效果如下圖所示，點擊這里查看官方Paging Toolbar分頁功能代碼。
Paging Scroller的分頁實現比較簡單，只要在Grid Panel中設置如下代碼即可，點擊這里查看官方Paging Scroller分頁功能代碼。
Ext.create('Ext.grid.Panel', { //使用Paging Scroller分頁插件 verticalScroller: 'paginggridscroller', // do not reset the scrollbar when the view refreshs invalidateScrollerOnRefresh: false, // infinite scrolling does not support selection disableSelection: true, // ... }); 4 Grid Panel添加Checkbox
只要設置Grid Panel的selModel屬性為Ext.selection.CheckboxModel，點擊這里查看官方代碼實例。
Ext.create('Ext.grid.Panel', { selModel: Ext.create('Ext.selection.CheckboxModel'), //設置Grid Panel的選擇模式為Checkbox store: userStore, columns: ... }); 5 綜合示例
var grid = new Ext.grid.GridPanel({ store //數據源 cm //Ext.grid.columnModel columns //功能和Ext.grid.columnModel一樣。與cm有一個就行 autoWidth:true width title border:false columnLines: true, renderTo //顯示div標簽的id animCollapse:false //True 表示為面板閉合過程附有動畫效果 (默認為true,在類 Ext.Fx 可用的情況下). collapsible: true, //true 表示面板可以閉合 columnLines：true, //true 表示有格邊框 loadMask:true //獲取數據里時有等待界面 stripeRows: true, //雙色表格 plugins：true, bbar:new Ext.PagingToolbar({ pageSize:10, store:store, //數據源 displayInfo:true, //為true時下面的才顯示 displayMsg:'顯示第 {0} 條到 {1} 條記錄，一共 {2} 條', emptyMsg:'沒有記錄' }), tbar:[{ text:'查詢', icon:'/trade/images/delete.gif', cls:'x-btn-text-icon', handler:function(){win.show();} } }) //********************************************** //PagingToolbar分頁 //傳到服務器數據 start開始查詢位置， limit要查詢多少條 //排序 //服務器 sort,dir //********************************************** var com = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "客戶ID", width: 50, sortable: true, dataIndex: 'memid'}, {header: "客戶姓名", width: 75, sortable: true, dataIndex: 'memName'}, {header:'姓別', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}} {header: '跟蹤號',width:150,dataIndex:'code'}, {header: '日期', width:150, dataIndex: 'kd_time'} ]); /*********************************************** grid tbar 樣式 cls:'x-btn-text-icon' 添加 **************************************************/ EditorGridPanel chickToEdit:1 //點擊次數 ColumnModel 中要加editor editor:new Ext.form.TextField({ }) //獲取修改后的數據 var storeEdit = grid.getStore(); // var modified = storeEdit.modified.slice(0); // Ext.each(modified,function(m){ alert(m.data.id); //數據就在m.data中 id 為字段名 }) //獲取grid數據 var selModel = grid.getSelectionModel(); 獲取選擇模式 var record; if(!selModel.hasSelection()){ Ext.Msg.alert('警告','請選擇要修改的行!'); return; } selModel.getSelections().length; //選擇的行數 record = selModel.getSelected(); //獲取選擇行的數據 (1)獲取數據 :
單行
id = record.get('id'); 或者
id = record.data.id;
多行
record[i].get('ddd') (2)刪除數據 :
var obj = grid.getSelectionModel().getSelected(); store.remove(obj); grid.getView().refresh();
(3)查詢
store.baseParams['memid'] = fb.form.findField('memid').getValue(); store.baseParams['start'] = 0; store.load(); (4)添加一行列 :
Ext自己帶的一個插件
需要文件 RowExpander.js
var expand = new Ext.ux.grid.RowExpander({ tpl : new Ext.Template( '<p>{address}</p>' ) }); 在grid的columns中加 expand，
并在grid屬性中加 plugins: expand
新聞熱點
疑難解答
