ExtJs Grid

ExtJs Grid

2013 年 7 月 26 日

9:56

ExtJS中的表格功能很是强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。

表格由类Ext.gridPanel定义，继承自Panel，xtype为Grid。在ExtJs表格控件Grid必须包含列定义信息，并指定表格的数据存储器store，

列信息由类Ext.grid.ColumnModel定义；

Ext.onReady(function(){     /*         cm对象主要负责表格的列信息，表格包含的列由columns配置属性来描述，简称cm.columns是一个数组，每一行数据元素描述表格的一列信息，         header：表格中显示的文本；         dataIndex：记录集字段；         sortable：是否能够排序；         renderer：列渲染函数；         width：宽度；         format：格式化信息     */     var cm = new Ext.grid.ColumnModel([         {header:'编号',dataIndex:'id'},         {header:'名称',dataIndex:'name'},         {header:'描述',dataIndex:'descn'}         ]);     var data = [         ['1','name1','descn1'],         ['2','name2','descn2'],         ['3','name3','descn3'],         ['4','name4','descn4'],         ['5','name5','descn5']     ]     /*         var store用来建立数据存储对象，这也是GirdPanel必须配置的属性，         做用：把各类各样的原始数据(二维数组、Json对象数组、xml文本等)转换成             Ext.data.Reacord类型的对象；         配置参数：             proxy指定获取数据的方式，MemoryProxy用来解析javascript的对象             renderer表示如何解析这些数据；Ext.data.Reader专门用来解析数组，而且按照那种解析规范来解析；第一个参数表示提供数组下表位置存放的记录的Id（可选）             Ext.data.ArrayReader中第二个参数表示的record记录的模型，name指定索引字段mapping表示，指定cm当中的dataIndex是什么，name能够指定索引，可是当指定mapping的时候数据显示根据它来决定                  */     var store = new Ext.data.Store({             proxy:new Ext.data.MemoryProxy(data),             reader: new Ext.data.ArrayReader({},[                 {name:'id',mapping:0},                 {name:'name',mapping:1},                 {name:'descn',mapping:2}             ]),         });         //只有load的时候数据才可以进行加载         store.load();         var grid = new Ext.grid.GridPanel({                 renderTo:'grid',                 store:store,                 cm:cm,                 width:600,                 height:400             })     });     /**         1、数据显示不全的缘由，在data这个字段当中都重复了         2、高度和宽度没有设定              */

数据存储器由Ext.data.Store定义；

数据存储根据解析数据的不一样能够分为JsonStore、SimpleStore、GroupingStore等

 如何禁用Gird当中的拖放列功能

在定义grid的对象的时分别设定enableColumnMove和enableColumnResize为false

 如何实现斑马线效果，显示的效果就是不一样列不一样的颜色

stripeRows:true,

 如何实现遮罩效果

loadMask:true

 如何设定列的宽度

在定义ColumnModel的时候进行定义width

 如何自主决定每列的宽度

在定义grid的时候定义：

viewConfig:{

forceFit:true

}

说明：

使用了viewConfig后，Grid会根据你在cm里设置的width按比例分配

 如何让列的宽度自动伸展填充整个表格

autoExpandColumn:'descn' 它只能制定一列的id，注意必须是id，该id设置在ColumnModel当中

 如何让Gird支持列排序

在定义列模型的时增长sortable属性，如：

var cm = new Ext.grid.ColumnModel([

{header:'编号',dataIndex:'id',sortable:true}])

 

 

已使用 Microsoft OneNote 2013 建立。

来自为知笔记(Wiz)