Home > DeveloperSection > Articles > LoadMask in Sencha Touch

LoadMask in Sencha Touch


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

LoadMask in Sencha Touch

In this article, I’m explaining the loadmask in sencha touch and to use it in our application.

Example

Step-1:

First create a store named ColorStore to populate our list. Add one field name thruough field configuration and data through data configuration.

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

    extend: 'Ext.data.Store',

 

    config: {

        data: [

            {

                name: 'Red'

            },

            {

                name: 'Blue'

            },

            {

                name: 'Yellow'

            },

            {

                name: 'Green'

            },

            {

                name: 'White'

            },

            {

                name: 'Black'

            }

        ],

        storeId: 'colorStore',

        fields: [

            {

                name: 'name'

            }

        ]

    }

});

 

 

Step-2:

Now add a list to the project and named it ColorList and add store to it. Loadmask can attach to the application through masked configuration of the list, you have to define the loadmask through xtype and set the message in the masked configuration.

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

    extend: 'Ext.dataview.List',

 

    config: {

        fullscreen: true,

        id: 'ColorList',

        store: 'colorStore',

        masked: {

            xtype: 'loadmask',

            message: 'Loading....'

        },

        itemTpl: [

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

        ],

        items: [

            {

                xtype: 'toolbar',

                docked: 'top',

                items: [

                    {

                        xtype: 'button',

                        id: 'HideMask',

                        itemId: 'mybutton',

                        text: 'Hide Mask'

                    }

                ]

            }

        ],

        listeners: [

            {

                fn: 'onHideMaskTap',

                event: 'tap',

                delegate: '#HideMask'

            }

        ]

    },

 

    onHideMaskTap: function(button, e, eOpts) {

        this.getMasked().hide();

    }

});

 

Titlebar has a button named hide masked, tapping on the button will hide the loadmask.

Output

LoadMask in Sencha Touch

When you click/tap on the Hide Mask button, the loadmask will disappear.

LoadMask in Sencha Touch

 


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

Follow MindStick