深入浅析Extjs中store分组功能的使用方法
2016-04-20 00:00
711 查看
在项目实践的过程中,遇到需要将grid中数据根据某一字段分组的要求,当然,这个功能在api中有,在此列出来以供大家查找:
两点需要注意的地方:
1、在创建store时,需要设置groupField属性的值,即为需要分组的值
for example:
JavaScript代码
在这个数据模型中,我们需要以性别(sex)分组,那么请看下面的store
JavaScript代码
接下来,我们需要定义分组显示的tpl
JavaScript代码
在gridPanel中,代码如下:配置features为上述定义的groupingFeature
JavaScript代码
效果图如下:
当然实现分组后,在gridPanel中sex这一列就可以不用显示。
需要注意的是store中的数据如果在变化的时候,分组是不是也可以正常显示呢?
现在给grid增加一个itemclick事件,代码如下:
JavaScript代码
效果如下图
可以看出来,界面并不是我们想要的,那么如何解决呢?(最开始愚笨的解决方案是我将此gridPanel移除并销毁掉,重新加载)我将listeners监听事件的代码做了一些变换
JavaScript代码
再看效果:
这个就是我们想要的效果,在动态变化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代码
为避免removedRecords占用内存,进行了进一步的处理,功能可以实现,但是方法有些笨,大家有好的办法可以交流交流
看代码:
ExtJs3.0中Store添加 baseParams 的Bug
ExtJS Store的数据访问与更新问题
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Extjs 继承Ext.data.Store不起作用原因分析及解决
Extjs4 关于Store的一些操作(加载/回调/添加)
EXTjs4.0的store的findRecord的BUG演示代码
两点需要注意的地方:
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' }] });
效果图如下:
当然实现分组后,在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"}]); } }
效果如下图
可以看出来,界面并不是我们想要的,那么如何解决呢?(最开始愚笨的解决方案是我将此gridPanel移除并销毁掉,重新加载)我将listeners监听事件的代码做了一些变换
JavaScript代码
listeners:{ itemclick: function (thisview,record){ PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); } }
再看效果:
这个就是我们想要的效果,在动态变化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)); } }
您可能感兴趣的文章:
ExtJS Grid使用SimpleStore、多选框的方法ExtJs3.0中Store添加 baseParams 的Bug
ExtJS Store的数据访问与更新问题
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Extjs 继承Ext.data.Store不起作用原因分析及解决
Extjs4 关于Store的一些操作(加载/回调/添加)
EXTjs4.0的store的findRecord的BUG演示代码
相关文章推荐
- extjs grid取到数据而不显示的解决
- Windows Powershell排序和分组管道结果
- ExtJS下grid的一些属性说明
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 学习ExtJS(一) 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs grid添加一个图片状态或者按钮的方法
- Extjs学习笔记之四 工具栏和菜单
- extjs form textfield的隐藏方法
- SQL进行排序、分组、统计的10个新技巧分享
- ExtJS 2.0实用简明教程之应用ExtJS
- ExtJS Store的数据访问与更新问题
- 不用写JS也能使用EXTJS视频演示
- Extjs改变树节点的勾选状态点击按钮将复选框去掉
- extjs 列表框(multiselect)的动态添加列表项的方法
- mac中如何正确地安装搜狗输入法?