Ext 2.0.2下使用GroupHeaderGrid

这个问题很简单，没有必要单独用Ext 2.0.2的js，原有定义ColumnModel不支持这种json对象的形式，改变为数组形式即可。 

另外，其实看上去跨列，实际上header的div中就是3个table。

 

 

另外，Ext Core这个东东很不错，其实就是把Ext-base和Ext-all中的部分抽取出来单独发布，除去了很多组件，功能和jquery基本一样但是非常简便、也很小，而且开源免费，没有任何商业争议，建议大家如果不使用Ext widgets可以单独使用Ext Core3.0 对于Dom操作,动画、CSS操作，都非常方便。

 

原有写法：

 

new Ext.grid.ColumnModel({
    columns: [
     {header: 'Id', width: 25, dataIndex: 'id'},
     {header: 'Nr', width: 25, dataIndex: 'nr1'},
     {header: 'Text', width: 50, dataIndex: 'text1'},
     {header: 'Info', width: 50, dataIndex: 'info1'},
     {header: 'Special', width: 60, dataIndex: 'special1'},
     {header: 'Nr', width: 25, dataIndex: 'nr2'},
     {header: 'Text', width: 50, dataIndex: 'text2'},
     {header: 'Info', width: 50, dataIndex: 'info2'},
     {header: 'Special', width: 60, dataIndex: 'special2'},
     {header: 'Special', width: 60, dataIndex: 'special3'},
     {header: 'Changed', width: 50, dataIndex: 'changed'}
    ],
    defaultSortable: true
   }),

修改写法：

 

new Ext.grid.ColumnModel([
     {header: 'Id', width: 25, dataIndex: 'id'},
     {header: 'Nr', width: 25, dataIndex: 'nr1'},
     {header: 'Text', width: 50, dataIndex: 'text1'},
     {header: 'Info', width: 50, dataIndex: 'info1'},
     {header: 'Special', width: 60, dataIndex: 'special1'},
     {header: 'Nr', width: 25, dataIndex: 'nr2'},
     {header: 'Text', width: 50, dataIndex: 'text2'},
     {header: 'Info', width: 50, dataIndex: 'info2'},
     {header: 'Special', width: 60, dataIndex: 'special2'},
     {header: 'Special', width: 60, dataIndex: 'special3'},
     {header: 'Changed', width: 50, dataIndex: 'changed'}
    ]
   );   

至于排序可以在另外单独写。