Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: loadMask is not working though I have the config needed in my grid

  1. #1

    Default loadMask is not working though I have the config needed in my grid

    I ahve created the grid and added to a PagingToolbar. When I click the next or last page, the "loadMask" works so great. The same way if I filter the grid using ComboBox, it shows the nice looking "Loading..." masg.

    The only problem is that, it doesn't show up while loading the page for the FIRSTtime.. Please find the code below. I marked the places in GREEN and RED color for better readability. I don't know is there anything I should do with onRender here?

    Thanks in advance guys.

    Code:
    // Hypervisor Grid Configuration
     Ext.ux.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
         initComponent:function() {
         var config = {
         store:store // configured
        ,columns:cm //configured
            ,loadMask: true  //Though I configured under initComponent, it doesn't show up while loading the page for the first time.
        ,viewConfig:{forceFit:true}
        ,autoExpandColumn: 'HypervisorName'
        ,autoScroll: true
        ,plugins:[hvFilters, new Ext.ux.grid.Search({
                iconCls:'search'
                ,width: 200
                ,minChars:3
                ,autoFocus:true
        })]
         
          tbar:[{
                  xtype:'label',
                  text:'Sort by:'
          },new Ext.form.ComboBox({
                 id:'realmHvCombo',
                store: realmStore,
                 displayField: 'realms',
                 typeAhead: true,
                mode: 'remote',
                allowBlank:false,
                fieldLabel: 'Realm',
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Select a realm...',
                selectOnFocus:true,
                listeners:{
                    scope:this
                    ,select:function() {
                        this.getStore().baseParams = {action: 'fetch', realm: Ext.getCmp('realmHvCombo').getValue()};  // loadMask works fine here
                          this.getStore().load({params:{start:0, limit:100}});
                      }
                  }
          })]        
     }; // eo config object
      
     // apply config
     Ext.apply(this, Ext.apply(this.initialConfig, config));
      
     this.getStore().setDefaultSort('HypervisorName', 'desc');
     
     this.bbar = new Ext.PagingToolbar({  // Works fine here
         pageSize:100
         ,store:this.store
         ,displayInfo:true
         ,plugins: new  Ext.ux.ProgressBarPager()
          ,displayMsg: 'Displaying hypervisors {0} - {1} of {2}'
          ,emptyMsg: "No hypervisors to display"
     });
     
     
      
     // call parent
     Ext.ux.grid.Grid.superclass.initComponent.apply(this, arguments);
     } // eo function initComponent
     
     ,onRender:function() {
         
         // call parent
         Ext.ux.grid.Grid.superclass.onRender.apply(this, arguments);
      
         // load the store
         this.store.load({params:{start:0, limit:100}});
        
     } // eo function onRender

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Move the store loading to the afterRender or render method, so the mask it shown when the grid has been assigned a size.

  3. #3

    Default

    I tried both but nothing happens.

    Code:
    ,afterRender:function() {
          // load the store
         this.store.load({params:{start:0, limit:100}});
        
     }
    Code:
    ,render:function() {
          // load the store
         this.store.load({params:{start:0, limit:100}});
        
     }

  4. #4

    Default

    Cool. I added like below.

    ,afterRender: function() {
    Ext.ux.grid.Grid.superclass.afterRender.apply(this, arguments);
    this.store.load({params:{start:0, limit:100}});
    }

    It shows now. But first time at the top of the page the "Loading..." message is shown and after that, it's aligned to center. Any idea to overcome?

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The only way to do that would be to load the store in the afterlayout event of the gridpanel container.

    (the grid would need to be it's final size before you start loading)

  6. #6

    Default

    oooppppps. It works great. But the performance is very slow with this. It takes long time to load the grid this way when compared to afterRender.

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Did you add {single:true} to the afterlayout event handler? (otherwise it will fire multiple times!)

  8. #8

    Default

    It works but bit latency is there. Going forward if the rows increase, there might be a problem.. But I am keeping it like this now. Thanks for your help.

  9. #9
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    293

    Default

    Would not be easier just to add autoLoad:true to store configuration, to automatically load data?
    Start and limit default parameters can also be part of store config...

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Then you wouldn't get a loadMask at all, because in the beforeload event the grid isn't rendered yet.

Page 1 of 2 12 LastLast

Similar Threads

  1. loadmask is not working for a grid with local paging
    By madhu_g in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 24 Jan 2011, 11:30 AM
  2. Replies: 0
    Last Post: 19 Jul 2010, 11:50 PM
  3. loadMask is not working for me in IE7
    By polydyne in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Apr 2009, 5:52 AM
  4. LoadMask in Grid not working after reconfigure
    By ktp in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 31 Oct 2007, 4:18 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •