Extjs6 Sort Grid filter list items

Question

I have a list filter for one of my grid's columns. When I open the filter, the list is unsorted.

What I've tried is to attach a store to that filter and sort the store. Although the store is sorted, the filter show unsorted items.

This is my view model:

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

And bellow is a snippet from my view, where I configure store for filter:

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

I've also created a fiddle. Note that I need a store and not a config.

How to sort a grid filter?

Thank you

Answer 1

As @EvanTrimboli mentioned, you can't specify a store binding for the filters yet, you need a store config or instance. The fiddle from your question works because as the filter doesn't find a valid store config, it generates one by itself. After that you've tried to add a store config:

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

This should work, but you forgot to specify the idField and labelField filter configs. Here is the working fiddle with the mentioned corrections: https://fiddle.sencha.com/#fiddle/20rv&view/editor.

But I don't quite like this approach, because you need to load again the data for the test store, the chained store way seems to be more appropriate here. For this you will need to declare your store in the view model like this:

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

Then move the columns initialization into the initComponent method, so that the stores from the view model will be ready, then specify the following config for your filter:

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

Here is the working fiddle for this approach: https://fiddle.sencha.com/#fiddle/20s0&view/editor.