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>男</span><img src='https://www.jb51.net/images/icon_male.png' />"; } else { return "<span>女</span><img src='https://www.jb51.net/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}) });
使用选择模型获取数据