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页头分组如何显示其他信息