|
Extjs GridPanel 提供了非常強(qiáng)大數(shù)據(jù)表格功能，在GridPanel可以展示數(shù)據(jù)列表，可以對(duì)數(shù)據(jù)列表進(jìn)行選擇、編輯等。在之前的Extjs MVC開(kāi)發(fā)模式詳解中，我們已經(jīng)使用到了GridPanel，今天我們來(lái)介紹一下Extjs中GridPanel的詳細(xì)用法。 本文的示例代碼適用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中親測(cè)可用！ 本文由齊飛（youring2@gmail.com）原創(chuàng)，并發(fā)布在http://www./article/extjs-grid-in-detail，轉(zhuǎn)載請(qǐng)注明出處！推薦更多Extjs教程、Extjs5教程 創(chuàng)建GridPanel要使用GridPanel，首先要定義Store，而在創(chuàng)建Store的時(shí)候必須要有Model，因此我們首先來(lái)定義Model： //1.定義Model Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' } ] }); 然后創(chuàng)建Store： //2.創(chuàng)建store var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } }); 接下來(lái)才是GridPanel的代碼： //3.創(chuàng)建grid var grid = Ext.create("Ext.grid.Panel", { xtype: "grid", store: store, width: 500, height: 200, margin: 30, columnLines: true, renderTo: Ext.getBody(), selModel: { injectCheckbox: 0, mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI" checkOnly: true //只能通過(guò)checkbox選擇 }, selType: "checkboxmodel", columns: [ { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0', editor: { xtype: "numberfield", decimalPrecision: 0, selectOnFocus: true } }, { text: '電話', dataIndex: 'phone', editor: "textfield" } ], plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], listeners: { itemdblclick: function (me, record, item, index, e, eOpts) { //雙擊事件的操作 } }, bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true } }); 這個(gè)GridPanel的效果如下：
在這個(gè)GridPanel中，我們可以通過(guò)復(fù)選框勾選數(shù)據(jù)行，可以編輯“年齡”和“電話”列，還可以對(duì)數(shù)據(jù)進(jìn)行客戶端排序。 Extjs GridPanel的列Extjs GridPanel的列有多種類(lèi)型，例如：文本列、數(shù)字列、日期列、選擇框列、操作列等。我們可以通過(guò)xtype來(lái)指定不同的列類(lèi)型。 下面是列的常用配置項(xiàng)：
Extjs GridPanel行選擇模型（SelectionModel）控制Extjs GridPanel行選擇模型的兩個(gè)配置項(xiàng)是selType和selModel。默認(rèn)情況下，selType為rowmodel，對(duì)應(yīng)的Ext.selection.Model。這種選擇模型不會(huì)在grid中添加復(fù)選框，它通過(guò)點(diǎn)擊行進(jìn)行選中，默認(rèn)為多選“MULTI”。 如果我們要使用復(fù)選框來(lái)選擇行，我們需要使用下面的配置： selType: "checkboxmodel", 然后，我們可以通過(guò)selModel來(lái)配置selType： selModel: { injectCheckbox: 0, mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI" checkOnly: true //只能通過(guò)checkbox選擇 }, Extjs GridPanel行選擇除了界面操作來(lái)選中行，我們還可以通過(guò)代碼來(lái)選中行： //選擇行，并保持其他行的選擇狀態(tài) grid.getSelectionModel().select(records, true); //選擇所有 grid.getSelectionModel().selectAll(); //根據(jù)row index選擇 grid.getSelectionModel().selectRange(startRow, endRow, true) Extjs GridPanel獲取選中行獲取選中行，仍然需要通過(guò)SelectionModel來(lái)完成： var records = grid.getSelectionModel().getSelection(); Extjs GridPanel顯示行號(hào)默認(rèn)情況下Extjs GridPanel是不顯示行號(hào)的，我們需要手動(dòng)添加行號(hào)列。 columns: [
{ xtype:
"rownumberer", text: "序號(hào)" , width:40 }, { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0', editor: { xtype: "numberfield", decimalPrecision: 0, selectOnFocus: true } }, { text: '電話', dataIndex: 'phone', editor: "textfield" } ], 我們可以設(shè)置行號(hào)的列頭和寬度。 Extjs GridPanel異步加載數(shù)據(jù)Extjs GridPanel的異步加載數(shù)據(jù)是通過(guò)Store來(lái)實(shí)現(xiàn)的。我們之前已經(jīng)介紹過(guò)Extjs Store的各種代理方式，可以參考我之前的文章： 異步加載通常采用ajax代理，例如我們代碼中用到的： //2.創(chuàng)建store var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } }); 服務(wù)器端返回的數(shù)據(jù)格式如下： { "rows": [ { "name": "Tom", "age": 12, "phone": "1233455" }, { "name": "Jerry", "age": 12, "phone": "1233455" }, { "name": "Sinbo", "age": 12, "phone": "1233455" }, { "name": "Jack", "age": 12, "phone": "1233455" }, { "name": "Johnson ", "age": 12, "phone": "1233455" } ], "total": 5 } Extjs GridPanel分頁(yè)當(dāng)GridPanel中數(shù)據(jù)量大的時(shí)候，我們就需要使用分頁(yè)了。 分頁(yè)的實(shí)現(xiàn)由兩部來(lái)完成，首先是在Store中添加pageSize配置項(xiàng)，用來(lái)確定每頁(yè)顯示多少行數(shù)據(jù)；然后需要為GridPanel添加PagingToolbar。 1. Store添加pageSize配置項(xiàng) var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } }); 在分頁(yè)參數(shù)加上之后，Extjs在執(zhí)行ajax請(qǐng)求的時(shí)候會(huì)添加三個(gè)參數(shù)：
2. GridPanel添加PagingToolbar bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true } 在完成這兩項(xiàng)配置以后，GridPanel就可以使用分頁(yè)了。 Extjs GridPanel列編輯Extjs GridPanel可以方便的實(shí)現(xiàn)列編輯。要實(shí)現(xiàn)這個(gè)功能需要兩步： 1. 添加GridPanel的編輯插件 plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], 2. 為需要編輯的列指定編輯器 columns: [ { xtype: "rownumberer", text: "序號(hào)", width:40 }, { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0', editor: { xtype: "numberfield", decimalPrecision: 0, selectOnFocus: true } }, { text: '電話', dataIndex: 'phone', editor: "textfield" } 編輯器可以是一個(gè)field的配置，也可以是一個(gè)xtype。
對(duì)于編輯后的單元格，會(huì)在左上角出現(xiàn)一個(gè)紅色的標(biāo)識(shí)，說(shuō)明該數(shù)據(jù)是編輯過(guò)的，要想去掉這個(gè)紅色箭頭，需要調(diào)用record的commit()方法。 grid.on('edit', function (editor, e) { // commit the changes right after editing finished e.record.commit(); }); 除了單元格編輯外，Extjs還支持行編輯功能，只需要將插件替換為RowEditing即可，此處不再進(jìn)行演示。 Extjs GridPanel選中單元格內(nèi)容在默認(rèn)情況下，Extjs GridPanel不允許進(jìn)行選中單元格中的內(nèi)容，由于不能選中，我們就不可能來(lái)復(fù)制單元格中的內(nèi)容。如果要實(shí)現(xiàn)這種功能，我們需要通過(guò)viewConfig來(lái)實(shí)現(xiàn)。 代碼如下： viewConfig:{ stripeRows:true,//在表格中顯示斑馬線 enableTextSelection:true //可以復(fù)制單元格文字 } 禁止顯示列頭部右側(cè)菜單Extjs GridPanel的列，當(dāng)我們點(diǎn)擊列頭的時(shí)候，會(huì)出現(xiàn)一個(gè)菜單：
如果我們要禁用這個(gè)菜單，可以將每個(gè)column定義屬性menuDisabled指定為true，代碼如下： {header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}
本文由齊飛（youring2@gmail.com）原創(chuàng)，并發(fā)布在http://www./article/extjs-grid-in-detail，轉(zhuǎn)載請(qǐng)注明出處！推薦更多Extjs教程、Extjs5教程 |
|
|
來(lái)自： feimishiwo > 《extjs4_mvc》
