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,

                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)