Extjs6 Sort Grid filter list items

1
votes

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

3
extjsextjs6extjs6-classicextjs6.2
The reason you're having an issue is you can't databind stores for filters currently. You would need to pass a store config (or instance) directly. – Evan Trimboli
@EvanTrimboli I don't get what store config is. In the view I tried to set the business store (without binding)(example: store: 'business') but with the same effect. Can you please give me more details? – florin
@EvanTrimboli I've tried with a store config [store: { type: 'test', sorters: { property: 'business', direction: 'ASC' } }] but now the filter doesn't show anything fiddle – florin

3 Answers

2
votes

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.

0
votes

You should use a sorter in your store. In the TestStore.js add this after proxy:

sorters: ['business']

check extjs doc Sorting&Filtering

0
votes

Modify your store as given below. Which makes default sort by business column to grid. Your grid is binded to 'test' store, so add sorter to test store which makes default sort on your grid data.

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