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: storecm: 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: cmviewConfig:{ //让每列自动填充满表格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这一行对应的Recordstore.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);