ExtJS-数据处理-配置Store的过滤、排序、分组实例

更新记录
2022年7月19日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

实例-Store过滤操作

实例：通过记录的字段值进行过滤

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//通过记录的字段值进行过滤
store.addFilter({
    property: 'Name',
    value: 'dog'
});

console.log(store.getCount()); //1

实例：通过自定义方法进行过滤

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//通过记录的字段值进行过滤
store.filterBy(function(record){
    console.log(record.get('Name'));
    return record.get('Name') == 'Dog';
});

console.log(store.getCount()); //1

实例：检测是否已经过滤

使用store实例的isFiltered()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//通过记录的字段值进行过滤
store.addFilter({
    property: 'Name',
    value: 'dog'
});

//检测是否已经过滤
console.log(store.isFiltered()); //true

实例：清除过滤器

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//进行过滤
store.filterBy(function(record){
    return record.get('Name') == 'Dog';
});

//清除过滤器
store.clearFilter();
console.log(store.getCount()); //3

实例-Store排序操作

实例：使用字段值排序

使用Store实例的sort()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda666'  //防止偷盗666 ：Panda:P:
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);
//排序前第一个记录的Name字段值
console.log(store.getAt(0).get('Name')); //Panda

//定义排序
store.sort('Name','ASC');
store.sort('Name','DESC');

//排序后第一个记录的Name字段值
console.log(store.getAt(0).get('Name')); //Dog
console.log(store.getCount()); //3

实例：自定义排序

使用Store实例的sort()方法的sortFn配置项即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);
//排序前第一个记录的Name字段值
console.log(store.getAt(0).get('Name')); //Panda

//定义排序
store.sort({
    sorterFn: function(recordA, recordB){
        if(recordA.get('Id') < recordB.get('Id'))
        {
            return 1;
        }
        else if(recordA.get('Id') > recordB.get('Id'))
        {
            return -1
        }
        else
        {
            return 0;
        }
},
direction: 'DESC'  //指定方向
});

//排序后第一个记录的Name字段值
console.log(store.getAt(0).get('Name')); //Monkey
console.log(store.getCount()); //3

实例：检测是否已经排序

使用store实例的isSorted()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey'
});

//添加数据到Store中
store.add([user1,user2,user3]);
//排序前第一个记录的Name字段值
console.log(store.getAt(0).get('Name')); //Panda

//定义排序
store.sort('Name','ASC');
//检测是否已经排序
console.log(store.isSorted()); //true

实例-Store分组操作

实例：使用字段值分组

使用store实例的group()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name: 'UserType', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda',
    UserType: 'Creator'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog',
    UserType: 'Designer'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey',
    UserType: 'Creator'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//定义分组
//按UserType字段升序分组
store.group('UserType', 'ASC');

//获得每个组
var groups = store.getGroups();

//获得组的个数
console.log('Group Count = ' + groups.getCount());

//获得组的具体信息
for(var i = 0; i < groups.getCount(); i++)
{
    //获得组名
    console.log(groups.getAt(i).getGroupKey());
    //获得组内的数据条数
    console.log(groups.getAt(i).getCount());
    //获得组内的记录数据
    for(var j = 0; j < groups.getAt(i).getCount(); j++)
    {
        var record = groups.getAt(i).getAt(j);
        console.log(record.get('Name'));
    }
}

实例：自定义分组

使用Store实例的group()方法的groupFn配置项即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name: 'UserType', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda',
    UserType: 'Creator'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog',
    UserType: 'Designer'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey',
    UserType: 'Creator'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//自定义分组
store.group({
    groupFn: function(record){
        return record.get('Name').split('')[0];
        //按首字母分组
    },
    direction: 'DESC'  //指定方向
});

//获得每个组
var groups = store.getGroups();

//获得组的个数
console.log('Group Count = ' + groups.getCount());

//获得组的具体信息
for(var i = 0; i < groups.getCount(); i++)
{
    //获得组名
    console.log(groups.getAt(i).getGroupKey());
    //获得组内的数据条数
    console.log(groups.getAt(i).getCount());
    //获得组内的记录数据
    for(var j = 0; j < groups.getAt(i).getCount(); j++)
    {
        var record = groups.getAt(i).getAt(j);
        console.log(record.get('Name'));
    }
}

//清除分组
store.clearGrouping();

实例：检测是否已经分组

使用store实例的isGrouped()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name: 'UserType', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda',
    UserType: 'Creator'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog',
    UserType: 'Designer'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey',
    UserType: 'Creator'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//定义分组
//按UserType字段升序分组
store.group('UserType', 'ASC');

//检测是否已经分组
console.log(store.isGrouped());  //true

实例：清除分组

使用store实例的clearGrouping()方法即可

//测试用的Model
Ext.define('PandaApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name: 'UserType', type: 'string' }
    ]
});

//测试用的Store
var store = Ext.create('Ext.data.Store', {
    model: 'PandaApp.model.User',
});

//新建model的实例记录
var user1 = Ext.create('PandaApp.model.User', {
    Id : 666,
    Name : 'Panda',
    UserType: 'Creator'
});
var user2 = Ext.create('PandaApp.model.User', {
    Id : 888,
    Name : 'Dog',
    UserType: 'Designer'
});
var user3 = Ext.create('PandaApp.model.User', {
    Id : 999,
    Name : 'Monkey',
    UserType: 'Creator'
});

//添加数据到Store中
store.add([user1,user2,user3]);

//定义分组
//按UserType字段升序分组
store.group('UserType', 'ASC');

//获得每个组
var groups = store.getGroups();

//获得组的个数
console.log('Group Count = ' + groups.getCount());

//获得组的具体信息
for(var i = 0; i < groups.getCount(); i++)
{
    //获得组名
    console.log(groups.getAt(i).getGroupKey());
    //获得组内的数据条数
    console.log(groups.getAt(i).getCount());
    //获得组内的记录数据
    for(var j = 0; j < groups.getAt(i).getCount(); j++)
    {
        var record = groups.getAt(i).getAt(j);
        console.log(record.get('Name'));
    }
}

//清除分组
store.clearGrouping();