Home > DeveloperSection > Articles > Filtering Data in List Component in Sencha Touch

Filtering Data in List Component in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 3287  View(s)
Rate this:

Filtering Data in List Component in Sencha Touch

In this article, I’m explaining how to filter data in list component in sencha touch.

If you want to learn list component in sencha touch, then you can read my previous article:

http://www.mindstick.com/Articles/d6eaa43d-649b-4da3-a450-000fce8c2ae3/?List%20in%20Sencha%20Touch

Example

Step-1:

Firstly create a store with three fields name, league and division and add data through data configuration, also add filter to the store through filter configuration, in filter configuration set property to division and value to West.

Ext.define('MyApp.store.TeamStore', {

    extend: 'Ext.data.Store',

 

    config: {

        data: [

            {

                name: 'New York Yankee',

                league: 'AL',

                division: 'East'

            },

            {

                name: 'Tampa Bay',

                league: 'AL',

                division: 'East'

            },

            {

                name: 'Boston',

                league: 'AL',

                division: 'East'

            },

            {

                name: 'Toronto',

                league: 'AL',

                division: 'East'

            },

            {

                name: 'Baltimore',

                league: 'AL',

                division: 'East'

            },

            {

                name: 'Detroit',

                league: 'AL',

                division: 'Central'

            },

            {

                name: 'CleveLand',

                league: 'AL',

                division: 'Central'

            },

            {

                name: 'Chicago White Sox',

                league: 'AL',

                division: 'Central'

            },

            {

                name: 'Kansas City',

                league: 'AL',

                division: 'Central'

            },

            {

                name: 'Minniesota',

                league: 'AL',

                division: 'Central'

            },

            {

                name: 'Texas',

                league: 'AL',

                division: 'West'

            },

            {

                name: 'Los Angeles Angels',

                league: 'AL',

                division: 'West'

            },

            {

                name: 'Oakland',

                league: 'AL',

                division: 'West'

            },

            {

                name: 'Seattle',

                league: 'AL',

                division: 'West'

            }

        ],

        storeId: 'TeamStore',

        fields: [

            {

                name: 'name'

            },

            {

                name: 'league'

            },

            {

                name: 'division'

            }

        ],

        filters: {

            property: 'division',

            value: [

                'West'

            ]

        }

    }

});

 

Step-2:

Next drag-n-drop the list to the canvas and add store to it through store configuration. Add a toolbar to the list and four buttons to the toolbar.

Ext.define('MyApp.view.MyList', {

    extend: 'Ext.dataview.List',

 

    config: {

        store: 'TeamStore',

        itemTpl: [

            '<div>{name}</div>'

        ],

        items: [

            {

                xtype: 'toolbar',

                docked: 'top',

                items: [

                    {

                        xtype: 'button',

                        id: 'WestOnly',

                        itemId: 'mybutton',

                        text: 'West Only'

                    },

                    {

                        xtype: 'button',

                        id: 'CentralOnly',

                        itemId: 'mybutton1',

                        text: 'Central Only'

                    },

                    {

                        xtype: 'button',

                        id: 'EastOnly',

                        itemId: 'mybutton2',

                        text: 'East Only'

                    },

                    {

                        xtype: 'button',

                        docked: 'right',

                        id: 'ClearFilters',

                        itemId: 'mybutton3',

                        ui: 'decline',

                        text: 'Clear Filters'

                    }

                ]

            }

        ],

        listeners: [

            {

                fn: 'onWestOnlyTap',

                event: 'tap',

                delegate: '#WestOnly'

            },

            {

                fn: 'onCentralOnlyTap',

                event: 'tap',

                delegate: '#CentralOnly'

            },

            {

                fn: 'onEastOnlyTap',

                event: 'tap',

                delegate: '#EastOnly'

            },

            {

                fn: 'onClearFiltersTap',

                event: 'tap',

                delegate: '#ClearFilters'

            }

        ]

    },

 

    onWestOnlyTap: function(button, e, eOpts) {

        var sto = Ext.getStore('TeamStore');

        sto.clearFilter();

        sto.filter('division', 'West');

    },

 

    onCentralOnlyTap: function(button, e, eOpts) {

        var sto = Ext.getStore('TeamStore');

        sto.clearFilter();

        sto.filter('division', 'Central');

    },

 

    onEastOnlyTap: function(button, e, eOpts) {

        var sto = Ext.getStore('TeamStore');

        sto.clearFilter();

        sto.filter('division', 'East');

    },

 

    onClearFiltersTap: function(button, e, eOpts) {

        Ext.getStore('TeamStore').clearFilter();

    }

});

 

Output

Filtering Data in List Component in Sencha Touch

Filtering Data in List Component in Sencha Touch

Filtering Data in List Component in Sencha Touch

Filtering Data in List Component in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick