1

我有一个用于我的网格列的列表过滤器。当我打开过滤器时，列表未排序。

我尝试将商店附加到该过滤器并对商店进行排序。尽管商店已排序，但过滤器显示未排序的项目。

这是我的视图模型：

Ext.define('MyApp.view.myview.TestGridModel', {    
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test-grid',

    stores: {
        test: {
            type: 'test'
        },
        business: {
            source: '{test}',
            sorters: {
                property: 'business',
                direction: 'ASC'
            }
        },
        other:{
            type: 'other'
        }
    }
});

下面是我认为的一个片段，我在其中为过滤器配置存储：

bind: {       
    store: '{test}'
},

plugins: 'gridfilters',

columns: [{
    text: 'Id',
    dataIndex: 'id'
}, {
    text: 'Business',
    dataIndex: 'business',
    flex: 2,
    filter: {
        type: 'list',
        store: '{business}'
        //store: '{other}'
    }
}, {
    text: 'Profile',
    dataIndex: 'profile',
    flex: 2
}, {
    text: 'Program',
    dataIndex: 'program',

我还创建了一个fiddle。请注意，我需要一个商店而不是一个配置。

如何对网格过滤器进行排序？

谢谢

4

3 回答 3

2

正如@EvanTrimboli提到的，您还不能为过滤器指定商店绑定，您需要一个商店配置或实例。您的问题中的小提琴有效，因为过滤器找不到有效的商店配置，它会自行生成一个。之后，您尝试添加商店配置：

store: {
    type: 'test',
    sorters: {
        property: 'business',
        direction: 'ASC'
    }
}

这应该可以，但是您忘记指定idField和labelField过滤器配置。这是上述更正的工作小提琴：https ://fiddle.sencha.com/#fiddle/20rv&view/editor 。

但我不太喜欢这种方式，因为需要重新加载测试存储的数据，链式存储方式在这里似乎更合适。为此，您需要在视图模型中声明您的商店，如下所示：

stores: {
    test: {
        type: 'test',
        storeId: 'test'
    },
    business: {
        source: 'test',
        sorters: {
            property: 'business',
            direction: 'ASC'
        }
    }
}

然后将列初始化移动到 initComponent 方法中，以便视图模型中的存储准备好，然后为您的过滤器指定以下配置：

filter: {
    type: 'list',
    idField: 'business',
    labelField: 'business',
    store: this.getViewModel().getStore('business')
}

这是这种方法的工作小提琴：https ://fiddle.sencha.com/#fiddle/20s0&view/editor 。

于 2017-06-03T09:02:14.113 回答
0

如下所示修改您的商店。这使得默认按业务列排序到网格。您的网格绑定到“测试”存储，因此将排序器添加到测试存储，这会对您的网格数据进行默认排序。

Ext.define('MyApp.view.myview.TestGridModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test-grid',

    stores: {
        test: {
            type: 'test',
            sorters: [{
                property: 'business',
                direction: 'ASC'
            }]
        },
        business: {
            source: '{test}',
            sorters: [{
                property: 'business',
                direction: 'ASC'
            }]
        },
        other:{
            type: 'other'
        }
    }
});
于 2017-06-02T11:06:50.237 回答
0

您应该在商店中使用分拣机。在TestStore.js代理后添加这个：

sorters: ['business']

检查extjs 文档排序和过滤

于 2017-06-02T08:46:32.837 回答