Home > DeveloperSection > Articles > List in Sencha Touch

List in Sencha Touch


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

List in Sencha Touch

In this article, I’m explaining the list in sencha touch and how it works.

List is a custom styled DataView which allows Grouping, Indexing, Icons, and a Disclosure.

Example-1:

To create a simple list in sencha touch, simply drag-n-drop the list from the toolbox to the canvas.

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

    extend: 'Ext.dataview.List',

 

    config: {

        data: [

            {

                country: 'India'

            },

            {

                country: 'Australia'

            },

            {

                country: 'South Africa'

            },

            {

                country: 'Srilanka'

            },

            {

                country: 'Bangladesh'

            }

        ],

        itemTpl: [

            '<div>{country}</div>'

        ]

    }

});

 

To populate the list we can use the store but in this example we are using the data configuration of list to populate it. After writing the code in data configuration, write the country in itemTpl.

 Output       

List in Sencha Touch

Example-2:

In this example, we will populate the list from a store.

Step-1:

First create a store and named it CountryStore.

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

    extend: 'Ext.data.Store',

 

    config: {

        data: [

            {

                country: 'India',

                capital: 'New Delhi'

            },

            {

                country: 'Australia',

                capital: 'Sydney'

            },

            {

                country: 'England',

                capital: 'London'

            },

            {

                country: 'Bangladesh',

                capital: 'Dhaka'

            },

            {

                country: 'USA',

                capital: 'New York'

            }

        ],

        storeId: 'MyStore',

        fields: [

            {

                name: 'country'

            },

            {

                name: 'capital'

            }

        ]

    }

});

 

Create two fields country and capital and put the data through data configuration of store.

Step-2:

Now create a list and named it Country.

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

    extend: 'Ext.dataview.List',

 

    config: {

        fullscreen: true,

        ui: 'round',

        store: 'MyStore',

        itemTpl: [

            '<div>{country} - {capital}</div>'

        ]

    }

});

 

Set the store to the list through store configuration and write code in the itemTpl.

Output                    

 

List in Sencha Touch


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

Follow MindStick