Sencha touch Loading mask when rest request process - json

Question

is it possible to make a loading bar , when my list need to get json result from my web service?
Here is my code
list.js
Ext.define('bluebutton.view.BlueButton.MemberList', {
extend: 'Ext.List',
xtype: 'memberlistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
'Ext.dataview.Override'
],
config: {
styleHtmlContent: true,
scrollable: 'vertical',
itemHeight :20,
variableHeights : false,
store : { xclass : 'bluebutton.store.BlueButton.MemberList'},
grouped: true,
indexBar: true,
// plugins: [
//
// {
// xclass: 'Ext.plugin.ListPaging',
// autoPaging: true
//
// }
// ],
id :'memberlist',
items: [
],
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td rowspan="2" width="28%" >',
// '<div style="padding-left: 30px;">',
// ' <img src="{imgUrl}" width="140" height="130" /></div>',
'</td>',
'<td>',
' <div class="tweet">',
' <h3>{consumer_bbID}</h3>',
' <h3>Name: {fullName}</h3>',
' <h3>Point Avalaible : {currentPoint} , Last Visited : {lastVisited}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
Store.js
Ext.define('bluebutton.store.BlueButton.MemberList', {
extend: 'Ext.data.Store',
requires: [
'bluebutton.model.BlueButton.MemberList'
],
config: {
grouper: {
groupFn: function (record) {
return record.get('fullName')[0];
}
},
model :'bluebutton.model.BlueButton.MemberList',
storeId :'memberStore',
autoLoad: true,
clearOnPageLoad: false, // This is true by default
pageSize: 10,
}
});
model.js
Ext.define('bluebutton.model.BlueButton.MemberList', {
extend: 'Ext.data.Model',
config: {
idProperty: 'memberlistModel',
fields: [
{ name :'memberId'},
{ name: 'fullName' },
{ name: 'phone' },
{ name: 'age' },
{ name: 'point' },
{ name :'address'},
{ name: 'emailAddress' },
{ name: 'lastVisited' },
{ name: 'consumer_bbID' },
{ name: 'merchant_bbID' },
{ name: 'sessionId' },
{ name: 'deviceId' },
{ name: 'currentPoint' },
],
proxy: {
type: 'rest',
url: 'http://192.168.251.131:8080/WebCommon/rest/BBWebService/getMembersList',
reader: 'json',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
extraParams: {
sessionId: "1",
deviceId: "1",
merchant_bbID: "merchant1",
// add as many as you need
},
reader: {
type: 'json',
rootProperty: 'membersList'
},
writer: {
type: 'json',
},
}
}
});
It may delay few second when sencha load json data from web service? is it possible to implement loading bar when rest getting request from webs ervice