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

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

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。请注意，我需要的是商店而不是配置。

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

谢谢

Answer 1

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

sorters: ['business']

检查extjs doc排序和过滤

Answer 2

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

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

Answer 3

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

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

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

不过我不是很喜欢这种方式，因为test store需要重新加载数据，chained store的方式似乎更适合这里。为此，您需要像这样在视图模型中声明您的商店：

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

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

Extjs6 排序网格过滤器列表项

Extjs6 Sort Grid filter list items

extjs

extjs6

extjs6-classic

extjs6.2