深入浅析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 Accessor实现说明
Dec 06 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python框架中flask知识点总结
2018/08/17 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
C面试题
2015/10/08 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
工业设计专业推荐信
2013/10/29 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
python实现股票历史数据可视化分析案例
2021/06/10 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python