ExtJS Grid进阶【DOC精选】.docVIP

/******************************************************************** *本文档为个人学习笔记，提供给ExtJS爱好和工作需要者。 *由于上传文件格式及时间所限，只能将其内容全部拷贝DOC中上传 *学习过程中可以还原为对应格式的文件 *******************************************************************/ 一、制作一个简单的Grid var cm = new Ext.grid.ColumnModel([ {header:编号,dataIndex:id}, {header:名称,dataIndex:name}, {header:描述,dataIndex:desc} ]); var data = [ [1,name1,desc1], [2,name2,desc2], [3,name3,desc3], [4,name4,desc4], [5,name5,desc5] ]; var store = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:id}, {name:name}, {name:desc} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ height:600, renderTo:grid, store:store, cm:cm }); 二、Grid详解 Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需 要为每种数据格式写一个grid的实现了。 1、二维数组 ArrayData //定义表头ColumnModel：(表头中有四列) var cm = new Ext.grid.ColumnModel([ {header:编号,dataIndex:id}, {header:性别,dataIndex:sex}, {header:名称,dataIndex:name}, {header:描述,dataIndex:descn} ]); cm.defaultSortable = true; 该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。 请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。 如果只想某些列举有该功能，可以设置：{header:编号,dataIndex:id,Sortable:true}, //定义数据: 二维数组 ArrayData (现在就来看看这个Ext.data.Store如何转换三种数据) var data = [ [1,male,name1,descn1], [2,male,name1,descn2], [3,male,name3,descn3], [4,male,name4,descn4], [5,male,name5,descn5] ]; //定义数据存储器: 读取器为ArrayReader var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: id,mapping: 0}, {name: sex,mapping: 1}, {name: name,mapping: 2}, {name: descn,mapping: 3} ]) }); //加载数据 ds.load(); ****ds要对应两个部分：proxy和xy告诉我们从哪里获得数据，reader告诉我们 如