ExtJS4.2学习(三)Grid表格

Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义，表格的数据存储器由Ext.data.Store来定义。store负责把各种各样（如二维数组、JSON对象数组、XML文本等）的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式，这样就不需要为每种数据格式写一个对应的实现了。
制作一个简单的表格及属性说明

<script type="text/javascript"> 
//表格数据最起码有列、数据、转换原始数据这3项 
Ext.onReady(function(){ 
    //定义列 
    var columns = [ 
        {header:'编号',dataIndex:'id'}, //sortable:true 可设置是否为该列进行排序 
        {header:'名称',dataIndex:'name'}, 
        {header:'描述',dataIndex:'descn'} 
      ]; 
    //定义数据 
    var data =[ 
        ['1','张三','描述01'], 
        ['2','李四','描述02'], 
        ['3','王五','描述03'], 
        ['4','束洋洋','思考者日记网'], 
        ['5','高飞','描述05'] 
    ]; 
    //转换原始数据为EXT可以显示的数据 
    var store = new Ext.data.ArrayStore({ 
        data:data, 
        fields:[ 
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置 
           {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 //自动填满表格 
    }); 
}); 
      
</script>

主要代码如上，注释部分已经写的很详细了，大家用到的时候可以参考下。最终效果如下：

另外，有什么想说的，欢迎大家在下面留言，大家一起讨论进步！


连载中，请大家继续关注！本文出自我的个人网站思考者日记网