PDA

View Full Version : Loading mask is not displayed



msuresh
26 Nov 2010, 1:57 AM
Hi,
Loading message is not displayed when the grid is loading or refreshed via paging bar. Please help me in pointing where I am doing wrong.



/**
* @class UTP.search.SearchGridPanel
* @extends Ext.Grid.Panel
* This panel is used to display relevant Search data in Grids.
*/
UTP.search.SearchGridPanel = Ext.extend(Ext.grid.GridPanel, {
frame: false,
stripeRows : true,
autoScroll:true,
maskEmpty: true,
utpUrl:'',
dataFields:[
'id', {name:'gdate', type: 'date'},
'model', 'sn', 'sysid', 'caseNumber', 'system',
'release','title'
],
trackMouseOver:false,
disableSelection:true,
border:false,
loadMask: true,
loadMsg:'Loading ...',
loadMask: {
msg: this.loadMsg
},
nodataMsg:'Search data yielded 0 results...',
maskEmpty: true,
autoExpandColumn:'title',
colModel: new Ext.grid.ColumnModel({
...
}),
listeners:{
rowcontextmenu: function(grid, rowIndex, e){
...
},
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
initComponent:function() {
var config={
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: this.utpUrl,
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
idProperty:'id',
totalProperty: 'totalCount',
fields: this.dataFields
}),
sortInfo: {
field:'gdate',
direction: 'DESC'
},
listeners: {
loadexception: {
fn: function(proxy, options, response, e){
var showMask=false;
Ext.MessageBox.show({
title: 'UTP Error',
msg: 'Unable to load the data...',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
})
}
},
scope: this
}
})
};

Ext.apply(this, config);
Ext.apply(this,{bbar: new Ext.PagingToolbar({
pageSize: 100,
store: this.store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No results to display"
})});

UTP.search.SearchGridPanel.superclass.initComponent.apply(this, arguments);
this.store.load();
if (this.maskEmpty) {
this.store.on(
'load', function() {
var el = this.getGridEl();
if (this.store.getTotalCount() == 0 && typeof el == 'object') {
el.mask(this.nodataMsg, 'x-mask');
}
}, this
);
}}
});

/**
* @class UTP.search.ASUPGridPanel
* @extends Ext.Grid.Panel
* This panel is used to display ASUP data.
*/
UTP.search.AsupSearchGridPanel = Ext.extend(UTP.search.SearchGridPanel, {
id:'asup',
title:'ASUP',
border:'false',
utpUrl:'/data/json/search/searchVal.json',
initComponent:function() {
var config={
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
UTP.search.AsupSearchGridPanel.superclass.initComponent.apply(this, arguments);
}
});

//called as xtype later


Thanks,
Suresh

Condor
26 Nov 2010, 8:34 AM
1. Start loading the store after the grid is rendered.
2. You have 2 loadMask properties in your grid config.
3. Do not put complex objects (dataFields, loadMask, colModel, listeners, sm etc.) in the prototype. Initialize them in the initComponent method.