深入浅析Extjs中store分组功能的使用方法


Posted in Javascript onApril 20, 2016

在项目实践的过程中,遇到需要将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' 
}] 
});

效果图如下:

深入浅析Extjs中store分组功能的使用方法 

当然实现分组后,在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"}]); 
} 
}

效果如下图

深入浅析Extjs中store分组功能的使用方法 

可以看出来,界面并不是我们想要的,那么如何解决呢?(最开始愚笨的解决方案是我将此gridPanel移除并销毁掉,重新加载)我将listeners监听事件的代码做了一些变换

JavaScript代码

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); 
} 
}

再看效果:

深入浅析Extjs中store分组功能的使用方法 

这个就是我们想要的效果,在动态变化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)); 
} 
}
Javascript 相关文章推荐
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 #Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 #Javascript
JavaScript实现简单Tip提示框效果
Apr 20 #Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 #Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 #Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
You might like
php防盗链的常用方法小结
2010/07/02 PHP
PHP图片上传代码
2013/11/04 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
全面理解闭包机制
2016/07/11 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python和shell获取文本内容的方法
2018/06/05 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Django的models模型的具体使用
2019/07/15 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
课改先进个人汇报材料
2014/01/26 职场文书
建议书怎么写
2014/03/12 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
园林系毕业生求职信
2014/06/23 职场文书
助学金感谢信
2015/01/20 职场文书