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                                    //自动填满表格  
    });  
});