深入浅析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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
Vue.js仿Select下拉框效果
Feb 18 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
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php扩展开发入门demo示例
2019/09/23 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
跟老齐学Python之print详解
2014/09/28 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python类成员继承重写的实现
2020/09/16 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
企划经理的岗位职责
2013/11/17 职场文书
校园招聘策划书
2014/01/09 职场文书
计划生育宣传标语
2014/06/21 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
订货会主持词
2015/07/01 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2016继续教育研修日志
2015/11/13 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL