Hybrid View

  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,963
    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,963
    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
    Ext User
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    bhupatikrish is on a distinguished road

      0  

    Default


    Hi Hendricd,
    I am having the same problem. My load mask is not centered. I have the following code.

    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: true, // loading screen
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    })
    });

    Can you please let me know where to put the code you suggested?

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

      0  

    Default


    Quote Originally Posted by bhupatikrish View Post
    Hi Hendricd,
    I am having the same problem. My load mask is not centered. I have the following code.

    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: true, // loading screen
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    })
    });

    Can you please let me know where to put the code you suggested?
    Try putting this just before your load statement:

    grid.loadMask.show();
    grid.load.defer(50,grid,[ anyArguments ]);
    "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
    478
    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 ?