ExtJS6排序网格过滤器列表项目

Question

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

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

这是我的视图模型：

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'
        }
    }
});

和Bellow是我视图的片段，我在其中为过滤器配置商店：

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',

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

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

谢谢

Answer 1

如@evantrimboli所述，您无法为过滤器指定绑定的商店，您需要商店的配置或实例。问题的小提琴起作用，因为由于过滤器找不到有效的商店配置，因此它会单独生成一个。之后，您尝试添加商店配置：

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

这应该有效，但是您忘了指定IDFIELD和LABELFIELD过滤器配置。这是带有上述更正的工作小提琴：https：//fiddle.sencha.com/#fiddle/20rv& amp; 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＆amp; view/editor。

Answer 2

您应该在商店中使用混乱器。在 TestStore.js中添加代理之后：

sorters: ['business']

检查extjs doc排序

修改您的商店如下所示。这使默认排序按业务列到网格。您的网格被束缚在"测试"商店中，因此在测试商店中添加分隔器，这使您的网格数据默认排序。

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'
        }
    }
});