Ext.grid.feature.Grouping页头分组如何显示其他信息
Ext4+增加了groupHeaderTpl配置项，可以用来显示分组相关信息。如果要显示除了name外的信息groupHeaderTpl配置项还提供了rows信息，这个rows是ext分好组的数据。Ext.grid.feature.Grouping的groupHeaderTpl可用参数查看这里http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.feature.Grouping-cfg-groupHeaderTpl。
如下面这个Ext.grid.feature.Grouping显示了分组数据中的第一条数据的name属性值。
注意：<tpl for="rows[0].data">{name}</tpl>这里，tpl中间的{}改为你数据源中字段名称，本例返回的数据为{rows:[{name:'name0',sex:'male或者female', cuisine:'page-1-cuisine4', xxoo:'xxoo0'}....]}，通过开发工具查看后也可以找到ext最终引用在模板上的数据如下图所示
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName} : {[values.rows.length]} --<tpl for="rows[0].data">{name}</tpl>',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
})
还可以使用tpl的if...else语句格式化分组页头的显示内容，如sex为female女性显示名字为红色，male为蓝色
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
ftype: 'grouping',
groupHeaderTpl: '{columnName} : {[values.rows.length]} --'
+ '<tpl for="rows[0].data">{sex}'
+ '<tpl if="sex==\'female\'"><font color="red">{name}</font><tpl else><font color="blue">{name}</font></tpl>'
+ '</tpl>'
,
//groupHeaderTpl: '{columnName} : {[values.rows.length]} --<tpl for="rows[0].data">{name}</tpl>',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
})
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext.grid.feature.Grouping页头分组如何显示其他信息