深入浅析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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JavaScript 基本概念
Jan 20 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
ES5新增数组的实现方法
May 12 Javascript
js实现轮播图特效
May 28 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
js正则相关知识点专题
2018/05/10 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python 中的with关键字使用详解
2016/09/11 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
Python如何实现转换URL详解
2019/07/02 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
计生工作先进事迹
2014/08/15 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
政风行风建设整改方案
2014/10/27 职场文书
财务会计实训报告
2014/11/05 职场文书
爱心募捐通知范文
2015/04/27 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS