当前位置: 代码迷 >> Web前端 >> Ext 2.0.2上使用GroupHeaderGrid
  详细解决方案

Ext 2.0.2上使用GroupHeaderGrid

热度:133   发布时间:2012-11-07 09:56:10.0
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'}
????]
???);???
至于排序可以在另外单独写。
  相关解决方案