Extjs中store分组效能的使用 _JavaScript

Extjs中store分组功能的使用

在项目实践的过程中，遇到需要将grid中数据根据某一字段分组的要求，当然，这个功能在api中有，在此列出来以供大家查找：

两点需要注意的地方：

1、在创建store时，需要设置groupField属性的值，即为需要分组的值

for example:

Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: ['name', 'sex']
    });

在这个数据模型中，我们需要以性别(sex)分组，那么请看下面的store

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

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

    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事件，代码如下：

listeners:{
        itemclick:function(thisview,record){
        PersonStore.add([{name:"li",sex:"male"},{name:"zhang",sex:"female"}]);
        }
        }

效果如下图

可以看出来，界面并不是我们想要的，那么如何解决呢？（最开始愚笨的解决方案是我将此gridPanel移除并销毁掉，重新加载）我将listeners监听事件的代码做了一些变换

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的规则将数据加载进来。

希望此文能给大家带来帮助！

亲自动手实践才是真理！

2楼aaoxue昨天 23:04: 我的天哪，加了些颜色，怎么全变成源码显示出来了，大家忽略其中的span标签

1楼zhangshidong昨天 23:03: 有用，mark