grid多表头与锁列

grid多表头与锁列

(一)常见的grid：
    1.先定义列
    var cm=new Ext.grid.ColumnModel([
                {
                    header:'姓名',dataIndex:'name',sortable:true
                },
                {
                    header:'年龄',dataIndex:'age',sortable:true
                },
                {
                    header:'联系方式',dataIndex:'photo',sortable:true
                },
                {
                    header:'地址',dataIndex:'address',sortable:true,renderer:function(value){
                       return "<a href='http://" + value + "' target='_blank'>" + value + "</a>";
                    }
                }
            ]);
    2.定义数组数据
    var dataArr=[
        [1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com'],
        [2, 'jfox', 'huihoo', 'www.huihoo.org'],
        [3, 'jdon', 'jdon', 'www.jdon.com'],
        [4, 'springside', 'springside', 'www.springside.org.cn']
                ];
    3.定义store
    var ds=new Ext.data.SimpleStore({
        data:dataArr,
        fields:["name","age","photo","address"]
        });
    4.表格
    var myGrid=new Ext.grid.GridPanel ({
        cm:cm,
        ds:ds,
        title:'表格数据',
        autoHeight:true,
        autoExpandColumn: 2,
        bbar:new Ext.PagingToolbar({
        store:ds,
        pageSize:10,
        displayInfo:true})
 ));

(二)多表头grid
    1.首先是引用ColumnHeaderGroup.css和ColumnHeaderGroup.js这两个文件。
    2.定义三个全局变量
        var cmItems = [];
        var cmConfig = {};
 var GroupRow = [];
    3.将列放入数组中。
      cmConfig = { header:'编号', align: 'center', dataIndex: 'Code', width: 400}
      cmItems.push(cmConfig);
      cmConfig = { header:'名称', align: 'center', dataIndex: 'Name', width: 400}
      cmItems.push(cmConfig);
      GroupRow.push({
                 header:'跨列1',
                 align: 'center',
                 colspan: 2
                    });
     4.定义列。
      var cm = new Ext.grid.ColumnModel(cmItems);
      var group = new Ext.ux.grid.ColumnHeaderGroup({
          rows: [GroupRow]
          });
     5.定义store
      var store = new Ext.data.Store({
          proxy: new Ext.data.HttpProxy({ url:.., method: "post", async: false }),
          reader: new Ext.data.XmlReader(
          {
            totalProperty: 'totalRecords',
            record: 'row'
          },
          [{ name: 'Code' }, { name: 'Name' }]
          )
          });
     //加载store
     store.load({ params: { 参数:值}});
     6.定义grid
     var gridArray = new Ext.grid.GridPanel({
         store:store,
         cm:cm,
         disableSelection: true,
         enableColumnResize: false,
         trackMouseOver: false,
         id: "gridArray",
         autoScroll: true,
         border: false,
         viewConfig: {
               columnsText: '显示的列',
               scrollOffset: 20,
               sortAscText: '升序',
               sortDescText: '降序'
                        },
         plugins: group
         });
(三)锁列
    先引用LockingGridView.css和LockingGridView.js两个文件。
    ...其它步骤和定义一般grid没有什么不同。
    要注意的是定义列
    var cm=new Ext.ux.grid.LockingColumnModel(
           [
    {header: '编号',width: 160, sortable: true, dataIndex: 'Code', locked: true, id:'Code'},
    {header: '名称',width: 85,  sortable: true,  dataIndex: 'Name'}
    ]);
    var grid = new Ext.grid.GridPanel({
        store: store,
        colModel:cm,
        stripeRows: true,
               width: 500,
        view: new Ext.ux.grid.LockingGridView()
    });

对于多表头和锁列一起用好像还没有解决的办法，但是这种需求是存在的，变通的方法是做两个grid。
前段时间看见网上有人用Coolite写出来了。