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

2022-07-19 07:32:32 阅读：166 来源： 互联网

标签：Name Id Ext 分组 store var model 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();

标签：Name,Id,Ext,分组,store,var,model,ExtJS,Store
来源： https://www.cnblogs.com/cqpanda/p/16452744.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9