关闭

Extjs学习笔记——Grid表格

标签: extjs编程学习
173人阅读 评论(0) 收藏 举报
分类:

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





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    文章分类
    最新评论