深入浅析深入浅析Extjs中中store分组功能的使用方法分组功能的使用方法
在项目实践的过程中,遇到需要将grid中数据根据某一字段分组的要求,当然,这个功能在api中有,在此列出来以供大家查
找:
两点需要注意的地方:
1、在创建、在创建store时,需要设置时,需要设置groupField属性的值,即为需要分组的值属性的值,即为需要分组的值
for example:
JavaScript代码
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['name', 'sex'] });
在这个数据模型中,我们需要以性别(sex)分组,那么请看下面的store
JavaScript代码代码
var PersonStore = Ext.create('Ext.data.Store', {
storeId: 'PersonStore',
model: 'Person',
groupField: 'sex',
data: [{
name: 'hongmei li',
sex: 'female'
},{
name: 'san zhang',
sex: 'male'
},{
name: 'Jim Green',
sex: 'male'
},{
name: 'Lily',
sex: 'female'
},{
name: 'Lucy',
sex: 'female'
}] });
接下来,我们需要定义分组显示的tpl
JavaScript代码代码
var groupingFeature= Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'sex: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
});//注意其中{name}即为store中sex列所对应的值
在gridPanel中,代码如下:配置features为上述定义的groupingFeature
JavaScript代码代码
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: PersonStore,
width: 600,
height: 400,
title: 'Person',
features: [groupingFeature],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'sex',
flex: 1,
dataIndex: 'sex'
}] });
效果图如下:
评论0