JavaScript的ExtJS框架中表格的編寫教程

更新時間：2016年05月21日 10:52:52 作者：鄭文亮

ExtJS是一個MVVM結構的JavaScript框架,在處理表格表單方面則是它的拿手好戲,這里整理了基本的JavaScript的ExtJS框架中表格的編寫教程

ExtJS中表格的特性簡介
表格由類Ext.grid.GridPanel定義，繼承自Ext.Panel，xtype為grid
表格的列信息由Ext.grid.ColumnModel定義
表格的數據存儲器由Ext.data.Store定義，根據解析數據的不同，數據存儲器可具體分為如下幾種：

JsonStore，SimpleStore，GroupingStore…

一個表格的基本編寫過程：

1、創(chuàng)建表格列模型

var cm = new Ext.grid.ColumnModel({
 {header: '角色', dataIndex: 'role'},
 {header: '等級', dataIndex: 'grade'},
 {header: '創(chuàng)建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //創(chuàng)建日期類型的數據
});

2、創(chuàng)建數據數組

var data = [
  ['士兵','7','2011-07-2412:34:56'],
  ['將軍','10','2011-07-2412:34:56'],
];

3、創(chuàng)建一個數據存儲對象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'} //創(chuàng)建日期列和顯示格式
  ])
});
store.load();

4、創(chuàng)建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
});

自動顯示行號，只要在創(chuàng)建cm時創(chuàng)建一個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在創(chuàng)建表格時設置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屬性，并創(chuàng)建Ext.PagingToolbar分頁工具條對象
* 注意，如果配置了分頁工具條，store.load()就必須在構造表格以后執(zhí)行。

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'}
  ])
});
//在創(chuàng)建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、創(chuàng)建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、加載數據，創(chuàng)建EditorGridPanel

store.load();
var grid = new Ext.grid.EditorGridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm
});

為可編輯表格添加和刪除數據

1、使用Record的create方法創(chuàng)建一個記錄集MyRecord,MyRecord相當于一個類

var MyRecord = Ext.data.Record.create([
  {name: 'id', type: 'string'},
  {name: 'name', type: 'string'}
]);
store.load();

2、創(chuàng)建EditorGridPanel面板，在屬性tbar中創(chuàng)建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(); //關閉表格的編輯狀態(tài)
      store.insert(0, p); //創(chuàng)建的Record插入store的第一行
      grid.startEditing(0, 0); //激活第一行第一列的編輯狀態(tài)
    }
  }, '-', {
    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的基礎上開發(fā)的更智能的高級表格組件

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中實現嵌套表格
先看效果：

2016521104833438.jpg (433×300)

代碼如下：

<!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的數據源以嵌套數組的形式表示細節(jié)區(qū)的數據,如下面的黑體所示。

var testData=[
  ["lugreen","男",26,[["數學",100],["語文",150]]]
  ,["lisi","男",25,[["數學",100],["語文",150]]]
  ,["zhangsan","男",27,[["數學",120],["語文",158]]]  
];

使用數組集中record對象的json屬性來獲取以細節(jié)區(qū)數據

var data=r.json[3];

2.在rowExpander的 expand事件中添加嵌套表格.

您可能感興趣的文章:

ExtJS
表格

extjs grid設置某列背景顏色和字體顏色的方法
extjs grid設置某列背景顏色和字體顏色的方法，需要的朋友可以參考下。
2010-09-09
ExtJS判斷IE瀏覽器類型的方法
這篇文章主要介紹了ExtJS判斷IE瀏覽器類型的方法,需要的朋友可以參考下
2014-02-02
extjs tabpanel限制選項卡數量實現思路及代碼
使用的是用變量存儲 id 加載新的選卡時交換 id ，從而限制了打開的選項卡數量，如果不是一定要這個效果，建議不要頻繁的關閉和創(chuàng)建tabpanel，感興趣的朋友可以參考下哈
2013-04-04
extjs關于treePanel+chekBox全部選中以及清空選中問題探討
treePanel+chekBox全部選中以及清空選中，想必大家在學習使用過程中都見過這種效果吧，接下來為大家詳細介紹下實現過程及細節(jié)，感興趣的朋友可以參考下哈
2013-04-04
ExtJS 2.0實用簡明教程之ExtJS版的Hello
下面我們寫一個最簡單的ExtJS應用，在hello.html文件中輸入下面的代碼
2009-04-04
ExtJs 學習筆記 Ext.Panle Ext.TabPanel Ext.Viewport
ExtJs 學習筆記基礎篇面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
2008-12-12
學習ExtJS（二） Button常用方法
ExtJS Button常用方法，需要學習的朋友可以參考下。
2009-10-10
Extjs實現進度條的兩種便捷方式
后臺程序往往可能要執(zhí)行一段時間才能得到返回結果，加入進度條可以提高客戶體驗度，在本文為大家介紹兩種便捷的實現方式，感興趣的朋友可以了解下
2013-09-09
extJs 常用到的增，刪，改，查操作代碼
剛剛參加完公司的項目，第一次使用extjs編寫用戶界面還是有點頭痛，現在小花整理好了，希望為初學者做個參考。
2009-12-12
Extjs在exlipse中設置自動提示的方法
spket最好用了，而且它還支持ext，安裝起來很簡單.....
2010-04-04