ExtJS中表控件的使用,属性设置和数据的获取.docVIP

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属性，添加一个自定义函数来渲染