JavaScript的ExtJS架構中表格的編寫教程_extjs

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:'Y-m-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: 'Y-m-d',    minValue: '2011-07-24',    disabledDays: [0, 6],    disabledDaysText: '選擇周一到周六之間的日期'  })),  renderer: function(value) {    return value.format("Y-m-d");  }}

屬性工作表格控制項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 class="detailData">',    '',    '</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事件中添加巢狀表格格.