深入浅析Extjs中store分组功能的使用方法

在项目实践的过程中,遇到需要将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'
}]
}); 

效果图如下:

当然实现分组后,在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));
}
}
(0)

相关推荐

  • EXTjs4.0的store的findRecord的BUG演示代码

    在findRecord方法调用了 findRecord: function()这个方法 复制代码 代码如下: findRecord: function() { var me = this, index = me.find.apply(me, arguments); return index !== -1 ? me.getAt(index) : null; }, 进入find方法 复制代码 代码如下: find: function(property, value, start, anyMatch,

  • ExtJS Grid使用SimpleStore、多选框的方法

    复制代码 代码如下: ///<reference path="./vswd-ext_2.0.2.js" /> Ext.onReady(function(){ var data = [ [1,"wilson.fu",10], [2,"wilson.fu2",20], [3,"wilson.fu3",30] ]; var sqldata = new Array() ; for(var i=0;i<10;i++)

  • ExtJs3.0中Store添加 baseParams 的Bug

    复制代码 代码如下: this.store.on('beforeload', function() { Ext.apply(Ext.getCmp("propTypeGrid").store.baseParams, { 参数1: '111', 参数2: '111' }); }); 但是在 3.0 中这样无法增加参数,于是在 ExtJs官方论坛上找到了解决方案: 复制代码 代码如下: this.store.on('beforeload', function(store,options) {

  • ExtJS Store的数据访问与更新问题

    可以使用add(Ext.data.Record[] records)或者add(Ext.data.Record record)向store末尾添加一个或多个record.如: 复制代码 代码如下: var newRecord=new PersonRecord({name:"Tom",age:22});  store.add(newRecord); add函数会将新的数据添加到store的末尾,这对其原有的排序方式可能造成破坏,如果希望保持有序,应使用addSorted,调用方法与add

  • Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 复制代码 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this.reader = new Ext.data.JsonReader( { totalProperty: 'results', root: 'rows', id:'d

  • Extjs4 关于Store的一些操作(加载/回调/添加)

    1.关于加载和回调的问题 ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据:因此,我们需要给它添加一个提示信息! 但是Store却没有waitMsg属性. 解决方案: 1.给store添加监听器,监听beforeload事件,加载前弹出提示框,加载完成后关闭提示框 2.callback为load的回调函数,在加载完成后执行,因此关闭提示框由它完成: 3.一定要给store的reload方法也添加callback函数,已关闭提示框 例子主要

  • Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)

    复制代码 代码如下: var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称', autoLoad: false, proxy: { type: 'ajax', url: '请求路径', getMethod: function(){ return 'POST'; },//亮点,设置请求方式,默认为GET reader: { type: 'json', root: 'Data',

  • 深入浅析Extjs中store分组功能的使用方法

    在项目实践的过程中,遇到需要将grid中数据根据某一字段分组的要求,当然,这个功能在api中有,在此列出来以供大家查找: 两点需要注意的地方: 1.在创建store时,需要设置groupField属性的值,即为需要分组的值 for example: JavaScript代码 Ext.define('Person', { extend: 'Ext.data.Model', fields: ['name', 'sex'] }); 在这个数据模型中,我们需要以性别(sex)分组,那么请看下面的stor

  • Android中实现ping功能的多种方法详解

    使用java来实现ping功能. 并写入文件.为了使用java来实现ping的功能,有人推荐使用java的 Runtime.exec()方法来直接调用系统的Ping命令,也有人完成了纯Java实现Ping的程序,使用的是Java的NIO包(native io, 高效IO包).但是设备检测只是想测试一个远程主机是否可用.所以,可以使用以下三种方式来实现: 1. Jdk1.5的InetAddresss方式 自从Java 1.5,java.net包中就实现了ICMP ping的功能. 使用时应注意,如

  • Asp.net管理信息系统中数据统计功能的实现方法

    数据统计是每个系统中必备的功能,在给领导汇报统计数据,工作中需要的进展数据时非常有用. 在我看来,一个统计的模块应该实现以下功能: 能够将常用的查询的统计结果显示出来: 显示的结果可以是表格形式,也可以是图形形式,如果是图形的话能够以多种形式显示(柱状图.折线图.饼图.雷达图.堆叠柱状图等): 统计查询的结果,点击数字或者百分比能够显示详细的数据: 能够自由组合查询条件.筛选条件.分组条件.排序等: 统计结果最好有个实时预览: 查询统计能够保存,以便下次能直接调用并显示统计查询的结果: 对于保存

  • ExtJS中设置下拉列表框不可编辑的方法

    ExtJS这个框架,并没有学习和用过,只知道是一个流行的前段框架,和Easy UI,BUI,DWZ等这些框架都是差不多的,只不过比他们更加强大而已,之所以写这个,我觉得还是很有帮助的. 今天朋友遇到了一个问题:ExtJS中的下拉列表如何设置不可编辑的,html中是不可以编辑的,但是现在这种UI框架中的下拉列表框都是可以编辑的,朋友的需求就是像html中的那样效果,所以朋友想到了用editable属性,但是写了这个属性之后就报错了,当时并没有看错误,我给他找了1个属性设置为不可编辑的,但是还是不好

  • 浅析IOS中播放gif动态图的方法

    一.引言 在iOS开发中,UIImageView类专门来负责图片数据的渲染,并且UIImageView也有帧动画的方法来播放一组图片,但是对于gif类型的数据,UIImageView中并没有现成的接口提供给开发者使用,在iOS中一般可以通过两种方式来播放gif动态图,一种方式是通过ImageIO框架中的方法将gif文件中的数据进行解析,再使用coreAnimation核心动画来播放gif动画,另一种方式计较简单,可以直接通过webView来渲染gif图. 二.为原生的UIImageView添加类

  • android中NFC读写功能的实现方法

    本文实例为大家分享了android中NFC读写功能的具体代码,供大家参考,具体内容如下 首先检查一下设备是否支持NFC功能 private void checkNFCFunction() { // TODO Auto-generated method stub mNfcAdapter = NfcAdapter.getDefaultAdapter(this); // check the NFC adapter first if (mNfcAdapter == null) { // mTextVie

  • 浅析mongodb中group分组

    group做的聚合有些复杂.先选定分组所依据的键,此后MongoDB就会将集合依据选定键值的不同分成若干组.然后可以通过聚合每一组内的文档,产生一个结果文档. 和数据库一样group常常用于统计.MongoDB的group还有很多限制,如:返回结果集不能超过16M, group操作不会处理超过10000个唯一键,好像还不能利用索引[不很确定]. Group大约需要一下几个参数. 1.key:用来分组文档的字段.和keyf两者必须有一个  2.keyf:可以接受一个javascript函数.用来动

  • ExtJs中gridpanel分组后组名排序实例代码

    复制代码 代码如下: /**   * 定义降序的groupingStore   */var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : 'ASC', groupBy : function(field, forceRegroup, direction) {     direction = direction ? (String(direction)               .toUpperCase()

  • ExtJs中简单的登录界面制作方法

    一 首先请看图片 二 登陆界面Ext代码 复制代码 代码如下: /// <reference path="http://http://www.jb51.net/Resources/ExtJs/vswd-ext_2.0.2.js" /> //加载提示框 Ext.QuickTips.init(); //创建命名空间 Ext.namespace('XQH.ExtJs.Frame'); //主应用程序 XQH.ExtJs.Frame.app = function() { } Ext

  • SQL中Group分组获取Top N方法实现可首选row_number

    有产品表,包含id,name,city,addtime四个字段,因报表需要按城市分组,统计每个城市的最新10个产品,便向该表中插入了100万数据,做了如下系列测试: 复制代码 代码如下: CREATE TABLE [dbo].[products]( [id] [int] IDENTITY(1,1) NOT NULL, [name] [nvarchar](50) NULL, [addtime] [datetime] NULL, [city] [nvarchar](10) NULL, CONSTRA

随机推荐