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

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

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

谢谢

Answer 1

如上所述@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。

Answer 2

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

sorters: ['business']

检查extjs doc排序和过滤

Answer 3

按照以下说明修改您的商店。这使得默认按业务列排序到网格。您的网格已绑定到“测试”状态。 store，所以在测试商店中添加分拣机，对网格数据进行默认排序。

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

Extjs6排序网格过滤器列表项

3 个答案: