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
When you click/tap on the Hide Mask button, the loadmask will disappear.
Leave Comment