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'}
    ]
   );   
至于排序可以在另外单独写。

你可能感兴趣的:(jquery,json,css,ext)