Applying loadMask() to only grid pannel in extjs is not working - extjs

Question

I want to apply load mask to only my grid pannel using id of it,
var myMask = new Ext.LoadMask({msg:"Please wait...",target:Ext.ComponentQuery.query('#grid')[0]});
myMask.show();
But this doesn't seems to work.The same code is working for tab pannel. Please suggest the necessary changes in order to achieve load mask only for grid pannel.
//View code
Ext.define("DummyApp.view.grid.GenericGrid",{
extend: "Ext.panel.Panel",
requires: ['DummyApp.view.toolBar','DummyApp.view.formPanel','Ext.state.*','Ext.data.*'],
controller: "genericGrid",
alias:"widget.genericgrid",
initComponent: function(){
Ext.apply(this, {
items: [this.createToolbar(),this.createGrid()]
});
this.callParent(arguments);
},
createToolbar: function(){
this.toolbar = Ext.create('DummyApp.view.toolBar');
return this.toolbar;
},
createGrid: function(){
this.grid = Ext.create('Ext.grid.Panel',{
itemId: 'batchGrid',
columnLines : true,
selType: 'cellmodel',
autoScroll :true,
maxHeight:535,
stateId: 'GridPanel',
loadMask: true,
stateful: true,
bind:{
store:'{genericGrid}'
}
});
return this.grid;
}
//Controller code
renderData: function(genericGrid) {
var store = Ext.create("DummyApp.store.GenericGrid"),
gridId = genericGrid.up().gridId,
serviceInput = Util.createServiceResponse(gridId);
var myMask = new Ext.LoadMask({msg:"Please wait...",target: Ext.ComponentQuery.query('#grid')[0]});
myMask.show();
Ext.Ajax.request({
url: Util.localGridService,
method: 'POST',
headers: Util.createRequestHeaders(),
jsonData: {
getConfigurationAndDataRequestType: serviceInput
},
success: function(conn, response, options, eOpts) {
myMask.hide();
var data = Util.decodeJSON(conn.responseText);
store.setData(Util.formatGridData(data));
genericGrid.reconfigure(store, Util.formatGridMetaData(data));
},
failure: function(conn, response, options, eOpts) {
myMask.hide();
Util.showErrorMsg(conn.responseText);
},
scope: this
});
store.load();
}

Answer 1

Look at this, in your code grid have itemId is "batchGrid"(find by "#batchGrid"), your grid panel have alias is "genericgrid"(find by "genericgrid" because it is alias of component). Then just correct it, replace your itemId on correct name, but better for this using needed component for target
var myMask = new Ext.LoadMask({msg:"Please wait...",target: Ext.ComponentQuery.query('#batchGrid')[0]});
better
renderData: function(genericGrid) {
var store = Ext.create("DummyApp.store.GenericGrid"),
grid = genericGrid.down('#batchGrid') // get grid
...
var myMask = new Ext.LoadMask({msg:"Please wait...", target: grid /*or genericGrid for gridpanel*/ });
Fiddle