Home > DeveloperSection > Articles > If- else statement in itemTpl configuration

If- else statement in itemTpl configuration


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

If- else statement in itemTpl configuration

In this blog, I’m explaining how to write the if-else statement in itemTpl configuration of list in sencha touch.

We have the list full of records and want to display such records which specify the given condition.

Example

Step-1:

First create a store to populate the list. In my store, there is two fields name and Boolean, the name field has different names and Boolean field have two values either true or false.

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

    extend: 'Ext.data.Store',

 

    config: {

        data: [

            {

                name: 'Alex Stewart',

                boolean: 'true'

            },

            {

                name: 'Joseph Henry',

                boolean: 'false'

            },

            {

                name: 'Steve Smith',

                boolean: 'true'

            },

            {

                name: 'Paul Jones',

                boolean: 'false'

            },

            {

                name: 'Bill Skew',

                boolean: 'true'

            }

        ],

        storeId: 'MyStore',

        fields: [

            {

                name: 'name'

            },

            {

                name: 'boolean'

            }

        ]

    }

});

 

Step-2:

Next create a list and add the store to it. In the itemTpl configuration of list write the if-else statement as shown below:

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

    extend: 'Ext.dataview.List',

 

    config: {

        store: 'MyStore',

        itemTpl: [

            '<tpl if="boolean == \'true\'">',

            '    <p>{name}</p>',

            '    <tpl else>',

            '                   <p>Boolean is false</p>',

            '</tpl>'

        ]

    }

});

 

Output

 

If- else statement in itemTpl configuration

 


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

Follow MindStick