Extjs学习笔记——Grid表格

Ext表格功能包括排序、缓存、拖动、隐藏某列、自动显示行号、列汇总、单元格编辑等。表格由Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。表格控件包含列定义信息，并指定表格数据存储器。表格数据包含列、数据、转换原始数据3项，列信息由columns定义，数据存储器由Ext.data.ArrayStore定义，store负责原始数据转换。具体如下：

Ext.onReady(function(){  

    //定义列  

    var columns = [  

        {header:'编号',dataIndex:'id'},

        {header:'名称',dataIndex:'name'},  

        {header:'描述',dataIndex:'descn'}  

      ];  

    //定义数据  

    var data =[  

        ['1','张三','描述1'],  

        ['2','李四','描述2']

    ];  

    //转换原始数据为Ext可以显示的数据  

    var store = new Ext.data.ArrayStore({  

        data:data,  

        fields:[  

           {name:'id'}, 

           {name:'name'},  

           {name:'descn'}  

        ]  

    });  

    //加载数据  

    store.load();  

      
    //创建表格  

    var grid = new Ext.grid.GridPanel({  

        renderTo:'grid',                                //渲染位置  

        store:store,                                      //转换后的数据  

        columns:columns,                        //显示列  

        stripeRows:true,                            //斑马线效果  

        enableColumnMove: false,         //禁止拖放列  

        enableColumnResize: false,     //禁止改变列宽度  

        loadMask:true,                              //显示遮罩和提示功能,即加载Loading……  

        forceFit:true                                    //自动填满表格  

    });  

});