深入浅析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 获取字符串字节数的多种方法
Jun 02 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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和ACCESS写聊天室(六)
2006/10/09 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
详解适配器在JavaScript中的体现
2018/09/28 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python中的随机函数random的用法示例
2018/01/27 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python递归实现打印多重列表代码
2020/02/27 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
竞聘书模板
2014/03/31 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript
python获取带有返回值的多线程
2022/05/02 Python