1. #1
    dddu88
    Guest

    Default how to appy loadMask for gridpanel

    how to appy loadMask for gridpanel


    Hi, all,

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

    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

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Thumbs up


    Try something like this.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    dddu88
    Guest

    Default


    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

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Just for grins, try this override:
    Code:
     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;
            }
    });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    dddu88
    Guest

    Default


    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:


    Code:
    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

  6. #6
    dddu88
    Guest

    Default


    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

  7. #7
    Sencha User
    Join Date
    Feb 2008
    Posts
    31
    Vote Rating
    0
    salvo is on a distinguished road

      0  

    Default


    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

    Code:
    // 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)
    };

  8. #8
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Thumbs up


    Try this:

    Code:
     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}}]); 
    
      	}
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #9
    Sencha User
    Join Date
    Feb 2008
    Posts
    31
    Vote Rating
    0
    salvo is on a distinguished road

      0  

    Default


    Hi hendricd,

    This works thanks a lot for your help!

  10. #10
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    474
    Vote Rating
    5
    mysticav is on a distinguished road

      0  

    Default


    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 ?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi