---
title: "Filtering Data in List Component in Sencha Touch"  
description: "In this article, I’m explaining how to filter data in list component in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-14  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1328/filtering-data-in-list-component-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 9 minutes  

---

# Filtering Data in List Component in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining how to [filter data](https://www.mindstick.com/forum/384/based-on-logged-username-to-filter-data-in-gridview) in list [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

If you want to learn list component in sencha touch, then you can read my [previous](https://yourviews.mindstick.com/view/81421/unlock-2-0-is-just-like-previous-corona-lockdowns) 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](https://www.mindstick.com/forum/287/how-to-add-data-in-drop-down-list) through data [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer), also add filter to the store through filter configuration, in filter configuration [set property](https://www.mindstick.com/blog/258/set-property-value-on-master-page-from-content-page) 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](https://www.mindstick.com/forum/1383/how-can-i-print-a-canvas-in-wpf) 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](https://www.mindstick.com/mindstickarticle/0d318a63-339d-4560-a642-94f4da04ae84/images/e0337871-330a-491f-bf02-56a976fbb22d.png)

![Filtering Data in List Component in Sencha Touch](https://www.mindstick.com/mindstickarticle/0d318a63-339d-4560-a642-94f4da04ae84/images/1135b7d9-6a53-4ea3-b406-c9030ed49247.png)

![Filtering Data in List Component in Sencha Touch](https://www.mindstick.com/mindstickarticle/0d318a63-339d-4560-a642-94f4da04ae84/images/06276ba3-1e5c-482e-9bc3-dbc602de619d.png)

![Filtering Data in List Component in Sencha Touch](https://www.mindstick.com/mindstickarticle/0d318a63-339d-4560-a642-94f4da04ae84/images/ad21e484-8981-427e-8f34-ec75b7f5055d.png)

---

Original Source: https://www.mindstick.com/articles/1328/filtering-data-in-list-component-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.