在项目实践的过程中，遇到需要将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'
}]
});
效果图如下：
当然实现分组后，在gridPanel中sex这一列就可以不用显示。
需要注意的是store中的数据如果在变化的时候，分组是不是也可以正常显示呢？
现在给grid增加一个itemclick事件，代码如下：
JavaScript代码
listeners:{
itemclick:function(thisview,record){
PersonStore.<span style="color:#ff0000;">add</span>([{name:"li",sex:"male"},{name:"zhang",sex:"female"}]);
}
}
效果如下图
可以看出来，界面并不是我们想要的，那么如何解决呢？（最开始愚笨的解决方案是我将此gridPanel移除并销毁掉，重新加载）我将listeners监听事件的代码做了一些变换
JavaScript代码
listeners:{
itemclick: function (thisview,record){
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true );
}
}
再看效果：
这个就是我们想要的效果，在动态变化store中的数据时，分组也要实现，而不是将数据追加在gridPanel的最后。对应这两段代码的区分，主要在，store添加数据的方法，前者是add(record),后者是loadData(records,[append])
起初不能理解为什么同样是store添加数据，效果却不一样，看官方文档的解释，add(),The new Model instances will be added at the end of the existing collection.(将数据追加在集合的最后）恍然大悟，loadData是按照store的规则将数据加载进来。
另外，如何移除组中最旧一行，自己动手查了一下，文档实现了，在这里与大家分享：
//将前面的listeners监听事件修改如下：
注意其中first([boolean group])方法，如果不传参数，获取的是store中的第一条数据，传参为true时，返回的是store分组以组名为key，组内第一条数据为value的多个对象，PersonStore.first(true).female获取female组内的第一条数据，想获取male中的，可以使用PersonStore.first(true).male
JavaScript代码
listeners:{
itemclick: function (thisview,record){
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true );
alert(PersonStore.first( true ).female.get( 'name' ));
console.log(PersonStore.first( true ).female);
PersonStore.remove(PersonStore.first( true ).female);
// console.log(PersonStore.getAt(0));
}
}
为避免removedRecords占用内存，进行了进一步的处理，功能可以实现，但是方法有些笨，大家有好的办法可以交流交流
看代码：
listeners:{
itemclick:function(thisview,record){
PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],true);
alert(PersonStore.first(true).female.get('name'));
console.log(PersonStore.first(true));
PersonStore.remove(PersonStore.first(true).female);
var recs = PersonStore.getRange();
console.log(recs);
//PersonStore.removeAll(true);//这句有没有都可以
PersonStore.loadRecords(recs);//重新load数据，内存中记录的removed掉的就没有了
console.log(PersonStore);
alert(PersonStore.getRemovedRecords.length);//这句alert结果为0
// console.log(PersonStore.getAt(0));
}
}
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。