how to appy loadMask for gridpanel

[bhupatikrish]

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?

[hendricd]

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 ]);

[bhupatikrish]

Hi Hendricd,
It's giving an error "grid.loadMask.show is not a function".

Try putting this just before your load statement:

grid.loadMask.show();
grid.load.defer(50,grid,[ anyArguments ]);

[hendricd]

Hi Hendricd,
It's giving an error "grid.loadMask.show is not a function".

@bhupatikrish -- Can you post your latest gridPanel definition for a look-see.

[bhupatikrish]

Hi Hendricd,
Thank you for your reply. My gridPanel code is
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"] ]}'
})
});
grid.loadMask.show();
grid.load.defer(50,grid);

@bhupatikrish -- Can you post your latest gridPanel definition for a look-see.

[hendricd]

@bhupatikrish -- It looks like you haven't rendered it yet, so there is not a loadMask initialized.

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"] ]}'
             }),
     listeners : {
          render(grid){
             grid.loadMask.show();
             grid.load.defer(50,grid);
          }
     }       
       });
   grid.render(Ext.getBody); //only if not an item of another Container.

[bhupatikrish]

Hi Hendricd,
Thank you for your support. I tried the way you suggested but its giving and error "grid.loadMask.show() is not a function". The code I tried is
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"] ]}'
}),
listeners : {
render: function(){
grid.loadMask.show();
grid.load.defer(50,grid);
}
}
});

But I resolved my problem by creating a new loadMask. Though it masks the entire screen it works for my situation. I appreciate for your support.
My current working grid look as

var grid = new Ext.grid.GridPanel({
title: config.title,
ds: ds,
cm: cm,
tbar: toolbar,
plugins: layout.getPlugins(),
loadMask: new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."}),
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"] ]}'
})
});

Thanks and Regards,
Krishna.

@bhupatikrish -- It looks like you haven't rendered it yet, so there is not a loadMask initialized.

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"] ]}'
             }),
     listeners : {
          render(grid){
             grid.loadMask.show();
             grid.load.defer(50,grid);
          }
     }       
       });
   grid.render(Ext.getBody); //only if not an item of another Container.

[hendricd]

@bhupatikrish -- I don't think your listener was formatted properly:

 listeners : {
          render: function(grid){
             grid.loadMask.show();
             grid.load.defer(50,grid);
          }
     }

[tfulmino]

Hendricd... please help!!!

I too am having the "loadMask" issue. Below is the code I am using to init a new GridPanel. I have tried to put the loadMask.show() function in the render event, but I have had no luck.

Any advice would be GREATLY appreciated.

Thanks!

Comperio.Controls.SearchResultGrid = function(config) {
    Ext.apply(this, {
        width:700,
        height:500,
        title:'ExtJS.com - Browse Forums',
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Topic",
            dataIndex: 'title',
            width: 420,
            sortable: true
        }],
        
        store: new Ext.data.JsonStore({
            root: 'topics',
            totalProperty: 'totalCount',
            idProperty: 'threadid',
            remoteSort: true,

            fields: [
                'title', 'forumtitle', 'forumid', 'author',
                {name: 'replycount', type: 'int'},
                {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                'lastposter', 'excerpt'
            ],

            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            proxy: new Ext.data.ScriptTagProxy({
                url: 'http://extjs.com/forum/topics-browse-remote.php'
            })
        }),
        listeners: 
        {
          render: function(grid)
          {
                grid.loadMask.show();
                grid.store.load();
          }
        },


        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true
        }
    });
    Comperio.Controls.SearchResultGrid.superclass.constructor.apply(this, arguments);
};

Ext.extend(Comperio.Controls.SearchResultGrid, Ext.grid.GridPanel, {});

Ext.reg('csearchresultgrid', Comperio.Controls.SearchResultGrid);

[hendricd]

@tfulmino -- It's not clear what layout your GridPanel is living in, but try using a different event to kick things off (when the GridView finally gets its initial sizing):

 listeners: 
        {
          afterlayout: function(grid)
          {
                if(grid.loadMask){
                    grid.loadMask.show();
                }
                grid.store.load.defer(100);
          }
        },