ExtJS中表格的特性簡介
表格由類Ext.grid.GridPanel定義，繼承自Ext.Panel，xtype為grid
表格的列信息由Ext.grid.ColumnModel定義
表格的數據存儲器由Ext.data.Store定義，根據解析數據的不同，數據存儲器可具體分為如下幾種：
JsonStore，SimpleStore，GroupingStore…
一個表格的基本編寫過程：
1、創建表格列模型
var cm = new Ext.grid.ColumnModel({ {header: '角色', dataIndex: 'role'}, {header: '等級', dataIndex: 'grade'}, {header: '創建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //創建日期類型的數據});2、創建數據數組
var data = [ ['士兵','7','2011-07-2412:34:56'], ['將軍','10','2011-07-2412:34:56'],];
3、創建一個數據存儲對象store，包含兩部分：proxy，獲取數據的方式；reader，解析數據的方式
ArrayReader的mapping用來設置列的排列順序
var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'role', mapping: 1}, {name: 'grade', mapping: 0} {name: 'createDate', mapping: 2, type:'date', dateFormat:'Ym-dH:i:s'} //創建日期列和顯示格式])});store.load();4、創建GridPanel，裝配ColumnModel和store
var grid = new Ext.grid.GridPanel({ renderTo: 'grid', store: store, cm: cm});另外獲取遠程數據可以使用ScriptTagProxy,如下所示
var store = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url:'http://...'}), reader: new Ext.data.ArrayReader({}, [ {name: 'role', mapping: 1}, {name: 'grade', mapping: 0} ]), sortInfo: {field: "role", direction: "ASC"} //設置默認排序列，ASC/DESC});表格的常用屬性功能
var grid = new Ext.grid.GridPanel({ enableColumnMove: false, //禁止拖放列enableColumnResize: false, //禁止改變列的寬度stripeRows: true, //斑馬線效果loadMask: true, //讀取數據時的遮罩和提示功能renderTo: 'grid', store: store cm: cm});var cm = new Ext.grid.ColumnModel({ {header: '角色', dataIndex: 'role', width:90, sortable: true}, //width設置列寬度，默認為100px，sortable設置排序功能{id:'grade', header: '等級', dataIndex: 'grade', width:40}});var grid = new Ext.grid.GridPanel({ renderTo: 'grid', store: store, cm: cm viewConfig:{ //讓每列自動填充滿表格forceFit: true } autoExpandColumn: 'grade' //自動延伸列，列的id在ColumnModel中定義});渲染表格，為表格設置特殊樣式
只需要在cm裡面增加一個renderer屬性，添加一個自定義函數來渲染傳進來（由EXT自動傳遞）的參數的樣式即可，即在返回value之前拼裝上相應的HTML和CSS或者JS響應事件。
function renderSex(value) { if (value == 'male') { return "<span style='color:blue;'>男</span><img src='images/icon_male.png' />"; } else { return "<span style='color:red;'>女</span><img src='images/icon_female.png' />"; }}var cm = new Ext.grid.ColumnModel([ {header:'id',dataIndex:'id'}, {header:'name',dataIndex:'name'}, {header:'sex',dataIndex:'sex',renderer:renderSex},]);var data = [ ['1','Jason','male'], ['2','Kate','female']];var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'sex'} ])});store.load();var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm});自動顯示行號，只要在創建cm時創建一個RowNumberer就可以了
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //顯示行號{header:'id',dataIndex:'id'}, {header:'name',dataIndex:'name'}, {header:'sex',dataIndex:'sex',renderer:renderSex},]);刪除列
store.remove(store.getAt(i));
刷新表格
grid.view.refresh();
為表格添加複選框
需要使用CheckboxSelectionModel
SelectionModel sm在使用時要放到cm和表格中
var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'編號',dataIndex:'id'}, {header:'名稱',dataIndex:'name'}]);var data = [ ['1','name1'], ['2','name2']];var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'} ])});store.load();var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm: sm});通過RowSelectionModel設置只選擇一行：
var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm: new Ext.grid.RowSelectionModel({singleSelect:true})});使用選擇模型獲取數據
grid.on('click', function() { var selections = grid.getSelectionModel().getSelections(); for (var i = 0; i < selections.length; i++) { var record = selections[i]; Ext.Msg.alert(record.get("id")); }});表格視圖
從MVC的思想來看表格控件：
* Ext.data.Store可看做模型
* Ext.grid.GridPanel可看做控制器
* Ext.grid.GridView可看做視圖
* 一般GridView由GridPanell自動生成，如果想設置GridView的屬性時，可以通過Ext.grid.GridPanel的getView()獲得視圖實例
Ext.get('button1').on('click', function() { grid.getView().scrollToTop(); grid.getView().focusCell(0, 0); var cell = grid.getView().getCell(0, 0); cell.style.backgroundColor = 'red';});使用GridPanel的viewConfig在創建表格時設置GridView的初始化參數
var grid = new Ext.grid.GridPanel({ height: 100, width: 400, renderTo: 'grid', store: new Ext.data.Store({ autoLoad: true, proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, meta) }), columns: meta, viewConfig: { columnsText: '顯示的列', //設置下拉菜單提示文字scrollOffset: 30, //設置右側滾動條的預留寬度sortAscText: '升序', //設置下拉菜單提示文字sortDescText: '降序', //設置下拉菜單提示文字forceFit: true //自動延展每列的長度}});為表格添加分頁工具條
* 可以使用GridPanel的bbar屬性，並創建Ext.PagingToolbar分頁工具條對象
* 注意，如果配置了分頁工具條，store.load()就必須在構造表格以後執行。
var grid = new Ext.grid.GridPanel({ renderTo: 'grid', autoHeight: true, store: store, cm: cm, bbar: new Ext.PagingToolbar({ pageSize: 10, //每頁顯示10條數據store: store, displayInfo: true, //顯示數據信息displayMsg: '顯示第{0} 條到{1} 條記錄，一共{2} 條', emptyMsg: "沒有記錄" //沒有數據時顯示的信息})});store.load();從後台腳本獲取分頁數據
使用HttpProxy傳遞請求，獲取服務器的JSON數據，交給JsonReader解析
var cm = new Ext.grid.ColumnModel([ {header:'編號',dataIndex:'id'}, {header:'名稱',dataIndex:'name'}]);var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'page.jsp'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'name'} ])});var grid = new Ext.grid.GridPanel({ renderTo: 'grid', autoHeight: true, //數據傳回來之前高度未知，所以要使用自適應高度store: store, cm: cm, bbar: new Ext.PagingToolbar({ pageSize: 10, store: store, displayInfo: true, displayMsg: '顯示第{0} 條到{1} 條記錄/ 共{2} 條', emptyMsg: "沒有記錄" })});store.load({params:{start:0,limit:10}});如果想讓分頁工具條顯示在表格的頂部，可以使用GridPanel的tbar屬性設置添加工具條
讓ExtJS在對返回的數據進行分頁
* 需要在頁面中引入examples/locale目錄下的PagingMemoryProxy.js文件
* 再使用PagingMemoryProxy設置代理
var store = new Ext.data.Store({ proxy: new Ext.data.PagingMemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ])});//在創建GridPanel之後調用store.load({params:{start:0,limit:3}});可編輯表格控件EditorGrid的使用
製作一個簡單的EditorGrid的步驟：
1、定義列ColumnModel，在裡面添加editor屬性
var cm = new Ext.grid.ColumnModel([{ header: '編號', dataIndex: 'id', editor: new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank: false //不允許在TextField中輸入空值}) )}, { header: '名稱', dataIndex: 'name', editor: new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank: false }) )}]);2、準備一個數組
var data = [ ['1','Jason'], ['2','Jay']];
3、創建Ext.data.Store，設置內存代理，設置ArrayReader解析數組
var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'} ])});4、加載數據，創建EditorGridPanel
store.load();var grid = new Ext.grid.EditorGridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm});為可編輯表格添加和刪除數據
1、使用Record的create方法創建一個記錄集MyRecord,MyRecord相當於一個類
var MyRecord = Ext.data.Record.create([ {name: 'id', type: 'string'}, {name: 'name', type: 'string'}]);store.load();2、創建EditorGridPanel面板，在屬性tbar中創建Ext.Toolbar
var grid = new Ext.grid.EditorGridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, tbar: new Ext.Toolbar(['-', { //-表示菜單分隔符text: '添加一行', handler: function(){ var p = new MyRecord({ id:'', name:'' }); grid.stopEditing(); //關閉表格的編輯狀態store.insert(0, p); //創建的Record插入store的第一行grid.startEditing(0, 0); //激活第一行第一列的編輯狀態} }, '-', { text: '刪除一行', handler: function(){ Ext.Msg.confirm('信息', '確定要刪除？', function(btn){ if (btn == 'yes') { var sm = grid.getSelectionModel(); //獲取表格的選擇模型var cell = sm.getSelectedCell(); //獲取選中的單元格var record = store.getAt(cell[0]); //通過行號得到store這一行對應的Record store.remove(record); //移除數據} }); } }, '-'])});為可編輯表格保存修改的結果
在上面例子的基礎之上，添加一個保存按鈕
text: '保存',handler: function(){ var m = store.modified.slice(0); //獲得store中修改過得數據for (var i = 0; i < m.length; i++) { //驗證表格信息是否正確，是否包含空格var record = m[i]; var fields = record.fields.keys; for (var j = 0; j < fields.length; j++) { var name = fields[j]; var value = record.data[name]; var colIndex = cm.findColumnIndex(name); var rowIndex = store.indexOfId(record.id); var editor = cm.getCellEditor(colIndex).field; if (!editor.validateValue(value)) { Ext.Msg.alert('提示', '請檢查輸入的數據是否正確！', function(){ grid.startEditing(rowIndex, colIndex); }); return; } } } var jsonArray = []; Ext.each(m, function(item) { jsonArray.push(item.data); //把修改過得數據放到jsonArray中}); Ext.lib.Ajax.request( //使用Ajax請求提交給後台'POST', 'save_data.jsp', {success: function(response){ //返回成功Ext.Msg.alert('信息', response.responseText, function(){ store.reload(); }); },failure: function(){ //返回失敗Ext.Msg.alert("錯誤", "服務器保存數據出錯！"); }}, 'data=' + encodeURIComponent(Ext.encode(jsonArray)) );}另外store可以設置屬性pruneModifiedRecords: true。這樣，每次remove或load操作時store會自動清除modified標記，可以避免出現下次提交時還會把上次那些modified信息都帶上的現象。
限製表格輸入的數據類型
NumberField
{ header:'ID', dataIndex:'id', editor:new Ext.grid.GridEditor(new Ext.form.NumberField({ //NumberField限制只能輸入數字allowBlank: false, allowNegative: false, //不能輸入減號maxValue: 10 }))}ComboBox
var comboData = [ ['0','Java'], ['1','Android']];{ header:'ComboBox', dataIndex:'combo', editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields:['value','text'], data: comboData }), emptyText: '請選擇', mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', readOnly:true })), renderer: function(value){ return comboData[value][1]; }}DateField
{ header:'Date', dataIndex:'date', editor:new Ext.grid.GridEditor(new Ext.form.DateField({ format: 'Ym-d', minValue: '2011-07-24', disabledDays: [0, 6], disabledDaysText: '選擇週一到週六之間的日期' })), renderer: function(value) { return value.format("Ymd"); }}屬性表格控件PropertyGrid的使用
是在EditorGrid的基礎上開發的更智能的高級表格組件
var grid = new Ext.grid.PropertyGrid({ title: '屬性表格控件PropertyGrid', autoHeight: true, width: 400, renderTo: 'grid', viewConfig: { forceFit: true }, source: { "String": "String", "Date": new Date(Date.parse('07/24/2011')), "boolean": false, "float": .01 }});禁用PropertyGrid編輯功能的方法
grid.on('beforeedit', function(e){ e.cancel = true; return false;});根據表格的name獲取value
grid.store.getById('Jason').get(value);ExtJS中實現嵌套表格
先看效果：
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title><script type="text/javascript"></script><link rel="stylesheet" type="text/css" href="Lib/ExtJs/2_2/resources/css/ext-all.css" /><script type="text/javascript" src="Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="Lib/ExtJs/2_2/ext-all-debug.js"></script><script type="text/javascript" src="Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script><script type="text/javascript" src="Lib/ExtJs/plus/RowExpander.js"></script><script type="text/javascript">Ext.onReady(function(){var testData=[ ["lugreen","男",26,[["數學",100],["語文",150]]] ,["lisi","男",25,[["數學",100],["語文",150]]] ,["zhangsan","男",27,[["數學",120],["語文",158]]] ];//storeTest= new Ext.data.SimpleStore({ fields: ["name","sex","age","grade"] ,data: testData});var expander = new Ext.grid.RowExpander({ tpl : new Ext.XTemplate( '<div>', '', '</div>' ) });expander.on("expand",function(expander,r,body,rowIndex){ //查找grid window.testEle=body; //alert(body.id); if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){ //alert("a"); var data=r.json[3]; var store=new Ext.data.SimpleStore({ fields: ["class","degrade"] ,data:data }); var cm = new Ext.grid.ColumnModel([ {header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true} ,{header: "成績",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true} ]); Ext.DomQuery.select("div.detailData")[0]; var grid = new Ext.grid.GridPanel( { store:store, cm:cm, renderTo:Ext.DomQuery.select("div.detailData",body)[0], autoWidth:true, autoHeight:true } ); }});//var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true}); var cm = new Ext.grid.ColumnModel([ expander ,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false} ,{header: "性別",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true} ,{header: "年齡",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true} ]); var grid = new Ext.grid.GridPanel( { id:'testgrid', store:storeTest, cm:cm, renderTo:"grid1", width:780, autoHeight:false, height:300, listeners:{}, plugins:[expander] } );});</script><style type="text/css">#div2 h2 { font-weight:200; font-size:12px;}.c1 h2 { font-weight:200;}</style></head><body><div id="grid1"> </div><div id="grid2"> </div></body></html>其中使用到的"RowExpander.js"為extjs官方示例中自帶的。
實現這個嵌套表格要注意兩點技巧：
1.提供給外層表格的dataStore的數據源以嵌套數組的形式表示細節區的數據,如下面的黑體所示。
var testData=[ ["lugreen","男",26,[["數學",100],["語文",150]]] ,["lisi","男",25,[["數學",100],["語文",150]]] ,["zhangsan","男",27,[["數學",120],["語文",158]]] ];
使用數組集中record對象的json屬性來獲取以細節區數據
var data=r.json[3];
2.在rowExpander的expand事件中添加嵌套表格.