how to appy loadMask for gridpanel

[dddu88]

Hi, all,

I have a problem to make the loadMask work for gridpanel when the grid panel first loads,
here is my code:

var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [ ...
                    ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),      
        frame:true,
        region: 'center',
        width: 500,
        height: 450,
        collapsible: true,
        animCollapse: false,
        id:'grid',
        iconCls: 'icon-grid',
        loadMask: true,        bbar: new Ext.PagingToolbar({
            pageSize: 100,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
                   })
           });

       store.load({params:{start:0, limit:100}, arg:['reload', true]});

I have over 100 of 2000 records loaded the first time, but no loadMask showed up when it is loaded first time, after that, when I clicked on next page each time, the loadMask showed up nicely.
Is there a way to make the loadMask work the first time when the grid is loading?

Also I tried to use the #loading-mask stylesheet, it worked for loading a whole page, but I want to make it work just for the grid panel instead of the whole page, how to do that?

Thanks in advance.
Dave

[hendricd]

Try something like this.

[dddu88]

Thanks for your response, I can get the loadMask when my grid loads first time, but it is not centered, please see the link:
http://extjs.com/forum/showthread.ph...457#post128457

Thanks

Dave

[hendricd]

Just for grins, try this override:

 Ext.apply(Ext.Element.prototype, {
        mask : function(msg, msgCls,maskCls){
            if(this.getStyle("position") == "static"){
                this.setStyle("position", "relative");
            }
            if(this._maskMsg){
                this._maskMsg.remove();
            }
            if(this._mask){
                this._mask.remove();
            }

            this._mask = Ext.DomHelper.append(this.dom, {cls:maskCls || "ext-el-mask"}, true);

            this.addClass("x-masked");

            this._mask.setDisplayed(true);

            if(typeof msg == 'string'){
                // *** FIX : create element hidden
                this._maskMsg = Ext.DomHelper.append(this.dom, {style:"visibility:hidden",cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
                var mm = this._maskMsg;
                mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
                mm.dom.firstChild.innerHTML = msg;
                (function(){
                    mm.setDisplayed(true);
                    mm.center(this);
                    mm.setVisible(true);
                }).defer(20,this); // *** FIX : defer things a bit, so the mask sizes over the el properly before centering
            }
            if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
                   this._mask.setSize(this.dom.clientWidth, this.getHeight());
            }
            return this._mask;
        }
});

[dddu88]

Thanks for your response, I am not sure where I should put this override in my code. would you please give me a hint?
Also, I tried the autoload: true in my store config, that will make the loadmask work when the grid first time loads, but the problem is that it will cause a null popup window shown up, I debugged into the code with firebug, and found the null popup window happened at the line
docReadyEvent.clearListeners() in file ext-all-debug.js:

if(docReadyEvent){
                docReadyEvent.fire();
                docReadyEvent.clearListeners();
            }

and the docReadyEvent is not null, I lost clue here, and I tried ext-all.js, it is the same null popup error window.

Any idea?

Thanks again.

Dave

[dddu88]

Ok, thanks alot, the override code I added to my script, my loadMask works now with the first time grid loading, and it is centered now, the only thing is that when I click on next page, the mask will show up right away, but the loading message will delay a little bit and then show up, if my records are less than 100, it will not even showup anymore.

But anyway, it is not perfect, but it works.

Thanks again.

Dave

[salvo]

Hi, same problem here and I can't find a workaround.

My grid's loadmask still refuses to display at first load. The mask appears on paging though.

I tried the "grid.view.refresh; grid.loadMask.show; store.load;" hack from hendricd but with no luck.
My grid is added to a tabpanel as a new tab (but this should not matter).

Any clue? Anything I could have missed?

Thanks

// create pre-configured grid class
resultsGrid = Ext.extend(Ext.grid.GridPanel, {

  initComponent	: function() {
  // configure the grid
  Ext.apply(this, {
  	id			: 'resultTab',
  	title		: 'Results',
  	autoScroll	: true,
  	iconCls		: 'icon-results',	
  	bodyStyle	: 'padding:0px',
  	closable	: true,
  	store		: searchDS,
  	columns		: [
  				{id: 'sales', header: "xx", width: 100, dataIndex: 'SALES'},
  				{id: 'company', header: "xx", width: 100, dataIndex: 'COMPANY'},
  				{id: 'product', header: "xx", width: 100, dataIndex: 'PRODUCT'} 
  				],
  	viewConfig	: 	forceFit : true,
  	autoExpandColumn: 'company',
  	loadMask	: true,
  }); // eo apply
				
  // call parent
  resultsGrid.superclass.initComponent.apply(this, arguments);
							
  }, // eo function initComponent

  onRender : function() {
	
  		this.view.refresh;
  		this.loadMask.show;
  			
  		// load the store
  		this.store.load({params:{start:0, limit:50}});   
											
  		// call parent
  		resultsGrid.superclass.onRender.apply(this, arguments);
  	}		
}); // eo extend


// register component
Ext.reg('searchresultsGrid', resultsGrid);

var searchresultsGrid = new resultsGrid();

// Open new tab
function addTab(){
	//searchDS.reload({params:{start:0, limit:50}});
	mainTabPanel.add(searchresultsGrid);
	mainTabPanel.setActiveTab(searchresultsGrid)
};

[hendricd]

Try this:

 onRender : function() {
									
  		// let it render first
  		resultsGrid.superclass.onRender.apply(this, arguments);

                //do it after the gridView is initialized !!
  		//this.view.refresh();
  		this.loadMask.show();
  			
  		// defer the store.load so browser can catch up
  		this.store.load.defer(20,this.store,[{params:{start:0, limit:50}}]); 

  	}

[salvo]

Hi hendricd,

This works thanks a lot for your help!

[mysticav]

I was looking for the same solution. But I just don't understand why so many lines for just a loading message in the grid ?

Is there a config solution ?

Why loadMask:true does not work as expected ?