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)