Grid.loadMask: true

[var1en]

function initGrid() {
var grid = new Ext.grid.Grid(this.customerLayout.getEl().createChild({tag: 'div'}), {
ds: dataStore,
cm: colModel,
autoSizeColumns : true,
monitorWindowResize : true,
autoHeight : true,
loadMask: true,
selModel : rowSelector,
enableColLock : false
});

//grid.on('click', this.showEditPanel.createDelegate(this));
grid.on({
rowclick : this.createItem.createDelegate(this),
rowcontextmenu : function(grid, rowIndex, e){
alert('context menu');
e.stopEvent();
}
});
this.grid = grid;

this.grid.render();

/* init page toolbar */
}

this.initGrid();
this.customerLayout.beginUpdate();
this.gridPanel = this.customerLayout.add('center',new Ext.GridPanel(this.grid));
this.grid.getDataSource().load({params:{start:0, limit:25}});
this.customerLayout.endUpdate();



In this case "Loading" located on the top of grid. I think bug that location of loading massage calculate before calculate size of grid.

[jack.slocum]

Do you have any more details? There really isn't much to go on.

[var1en]

There is some of screen shots.

loading_grid - first time when grid loading;
loading_grid - second time (refresh or change url or sorting) - loading message ok.

[jack.slocum]

Swap the order of these 2 lines to appear as below:

this.customerLayout.endUpdate();
this.grid.getDataSource().load({params:{start:0, limit:25}});

You were calling load (which centers the loading box) before calling endUpdate() which actually lays out your components.