|
大家好，繼上次的treepanel之后，今天給大家介紹gridpanel，gridpanel也是在extjs編程中出現(xiàn)頻率高的一種組件，是必須要掌握的，當(dāng)然，gridpanel比treepanel要復(fù)雜的多，基本上能實現(xiàn)excel中大部分基本功能，功能相當(dāng)強(qiáng)大。
先上張截圖吧，一睹grid的芳容（這是未經(jīng)過處理的最基本的grid界面）
grid的實現(xiàn)包括model、store和view三個層面。
從model開始，先貼代碼再講解：
- Ext.define('eduSys.Course.model', {
- extend : 'Ext.data.Model',
-
- fields : [
- {name : 'coursesGuid', type : 'string'},
- {name : 'code', type : 'string'},
- {name : 'name', type : 'string'},
- {name : 'period', type : 'int'}
- ]
- });
代碼的一開始，先定義一個model類，名字自己取，然后就是model里的鍵值對屬性賦值，首先最重要的就是這個自定義的類要繼承自Ext.data.Model，用extend屬性來表示，再就是這個表格的基本屬性，即表格每一列代表的含義，用field屬性來表示，field是一個數(shù)組類型，里面存放各個列屬性對象，每個對象里面要定義對象的名字（name）和類型（type），便于與后面的store層進(jìn)行連接。至于idProperty（可有可無）這個屬性后面講解。這樣model就基本寫好了，很簡單吧。
下面store層，代碼如下：
- Ext.define('eduSys.KnowledgeCourse.store', {
-
- extend : 'Ext.data.Store',
- model : 'eduSys.Course.model',
- storeId : 'knowledgeCourseStore',
- pageSize : 5,
-
- proxy : {
- type : 'ajax',
- url : '../../KnowledgeUnitServlet',
- extraParams: {
- guid : document.location.search.split('=')[1],
- cmd : 'getCourses'
- },
- reader : {
- type : 'json'
- }
- },
-
-
-
-
- autoLoad : {start : 0, limit : 5}
- });
store層也是自定義一個類，繼承自Ext.data.Store，然后這里也是定義model，就是前面寫的model層，model的賦值即前面寫的model層的名稱，然后最主要的是proxy，定義從后臺去取數(shù)據(jù)，然后加載到grid 中，proxy中url好說，extraParams添加額外的參數(shù)傳到后臺，已json的形式讀取數(shù)據(jù)。store中的autoload屬性也需要賦值，代表程序什么時候像后臺發(fā)送請求加載數(shù)據(jù)，可以賦boolean/Object,默認(rèn)的是false，默認(rèn)不發(fā)送請求，但可以在程序中可以通過grid的getStore( )函數(shù)拿到store對象然后調(diào)用load函數(shù)，然后系統(tǒng)就會像后臺發(fā)送定義的proxy里的內(nèi)容并加載，若手動設(shè)置為true，表示一開始就請求數(shù)據(jù)。上面代碼賦值的是一個對象，用于分頁用的。
當(dāng)然，store也可以裝載已經(jīng)定義好的數(shù)據(jù)集，設(shè)置store的data屬性，里面存放對象數(shù)組，鍵值對與model相對應(yīng)，則表格自動填充這些數(shù)據(jù)，如下：
- data : [
- {code : 'OS1', name : '萬俟輝夜1', period : 32},
- {code : 'OS2', name : '萬俟輝夜2', period : 48},
- {code : 'OS3', name : '萬俟輝夜3', period : 60},
- ],
最后就是view層的代碼實現(xiàn)了:
- Ext.define('eduSys.KnowledgeCourse.grid', {
-
- extend : 'Ext.grid.Panel',
- alias : 'widget.knowledgeCourseGrid',
- title : '課程',
- frame : true,
- selType : 'cellmodel',
- enableKeyNav : true,
- forceFit : true,
- config : [
- GridDoActionUtil = Ext.create('Ext.Util.GridDoActionUtil'),
- myStore = new eduSys.KnowledgeCourse.store()
- ],
- columns : [
- {
- text : '編號',
- dataIndex : 'code',
- align : 'center',
- editor : {xtype : 'textfield'}
- },
- {
- text : '名稱',
- dataIndex : 'name',
- align : 'center'
- },
- {
- text : '學(xué)時',
- dataIndex : 'period',
- align : 'center'
- },
- {
- xtype : 'actioncolumn',
- align : 'center',
- html : '<div style="margin-top: 4px;">詳情</div>',
- items: [{
- icon : '../../images/view.png',
- handler:
- this.GridDoActionUtil.doDetail
- }]
- }
- ],
- tbar : [
- {
- xtype : 'combobox',
- id : 'courseCombo',
- store : new eduSys.Course.comboStore(),
- queryMode : 'remot',
- valueField : 'coursesGuid',
- displayField : 'name',
- editable : false
- },
- {xtype : 'button', text : '增加', iconCls : 'edu_add',
- handler : function(btnObj) {
-
- }
- },
- {xtype : 'button', text : '刪除', iconCls : 'edu_remove',
- handler :
- this.GridDoActionUtil.doRemove
- }
- ],
- bbar : {
- xtype : 'pagingtoolbar',
- store : this.myStore,
- displayInfo : true
- },
-
- selType : 'checkboxmodel',
- multiSelect : true,
- store : this.myStore
- });
view層的信息量就比較大了，所以基本信息都在代碼里添加注釋，應(yīng)該看的還比較清楚，有的屬性有不同的配置，大家可以在官網(wǎng)api上查找該屬性，上面有詳細(xì)的解釋，鑒于上面代碼已經(jīng)可以代表大部分的需求，這里就不在多說。
好了，上面代碼基本上能實現(xiàn)大部分對于表格的要求了，另外gird還有其他增強(qiáng)功能，比如拖拽、分組等等，每一列還有很多其他的屬性進(jìn)行設(shè)置，比如常見的render（渲染）、format（格式化）等等，今天由于時間原因就不寫了，以后要是有時間再寫一篇gird的增強(qiáng)篇，在這里像大家致歉。
貼一下grid的增加、刪除、保存行的操作代碼，比較簡單。
- doAdd : function(grid, modelObj) {
- if(!(grid && modelObj)) {
- Ext.Msg.alert('error','參數(shù)傳遞不正確!!!');
- return;
- }
- var store = grid.getStore();
-
- var storeCount = store.getCount();
-
- var edit = grid.editingPlugin;
-
- var model = store.model;
-
- var eduObj = new model(modelObj);
- store.insert(storeCount,eduObj);
- },
-
- doRemove : function(grid) {
- var data = grid.getSelectionModel().getSelection();
- if(data.length == 0) {
- MsgTip.msg("提示","請選中項刪除!!!",true);
- } else {
- var st = grid.getStore();
- Ext.Array.each(data, function(record) {
- st.remove(record);
- });
- }
- },
-
- doSave : function(grid) {
- if(!grid) {
- Ext.Msg.alert('參數(shù)傳遞不正確!!!');
- return;
- }
-
- var store = grid.getStore();
-
- var records = store.getUpdatedRecords();
- var data = [];
- Ext.Array.each(records, function(model) {
- data.push(model.data);
- });
- if(data.length > 0) {
- Ext.Ajax.request({
- url : '要傳的url',
- params : {data : "[" +data.join(',')+ "]"},
- method : 'POST',
- timeout : 4000,
- success : function(response,opts) {
-
-
- model.commit();
- }
- });
- }
- },
下面說一下大家普遍遇到的grid保存中store.getUpdatedRecords();拿到數(shù)據(jù)為空的問題，我也是在上面糾結(jié)了一段時間，覺得有必要在這把解決方案提出來。
grid的model層有一個屬性：idProperty ，默認(rèn)是id，這個屬性就是grid所有列的主屬性，相當(dāng)于數(shù)據(jù)庫中的主鍵定義，是不可缺少的，所以當(dāng)你的model中配置沒有id基本字段的時候，extjs內(nèi)部的函數(shù)如getUpdatedRecords();就拿不到行的句柄（就用大家都懂的句柄這個詞吧），所以取出來的值為空，解決方案就是配置idProperty為你定義的字段中一個，這樣就解決了。
可是，有的兄臺可能碰到跟我一樣的問題，我的表格是可以新添加行的，用store的insert( Number index, Ext.data.Model[] records )函數(shù)添加新的一行，這個添加的model中每個屬性都是空，但是，idProperty也配置了，結(jié)果拿出來的東西還是為空，我就納悶了，怎么還是行不通，最后經(jīng)過慢慢對比調(diào)試，終于發(fā)現(xiàn)了根本問題，在新增的一行中idProperty設(shè)置的屬性必須要賦值，就像主鍵不能為空一樣，經(jīng)過賦值后的model對象插入到gird中后再調(diào)用getUpdatedRecords(); 就沒有問題了，能正常拿出更改的值。
最后說一下grid的分頁組建的實現(xiàn)細(xì)節(jié)。
在store層的定義中就定義了pageSize表示每一頁的行數(shù)，autoLoad中定義一個對象（如上面store中的autoLoader），上面表示最開始的起始位置和請求個數(shù)，這樣在往后臺請求的URL中就增加了兩個請求參數(shù)start和limit，按上面代碼就是添加了start=0&limit=5，這樣后臺就可以接受參數(shù)進(jìn)行處理，那么上一頁下一頁又是怎么處理的呢，在bbar中定義了分頁組建，當(dāng)點擊下一頁的按鈕時，extjs會自動像后臺發(fā)送一個URL請求，與proxy是同一個url請求，同樣的會添加兩個請求參數(shù)start和limit，只是這時的start值就是當(dāng)前的值加上（下一頁）或者減去（上一頁）pageSize大小，在后臺進(jìn)行處理就行了。
最后的最后，本文如果寫的有什么不足，希望大家與我交流，共同學(xué)習(xí)，共同進(jìn)步。。。。。。。。。
|
