loadMask Issue

[badgerd]

I have a grid in my application with a loadMask in place.


grid = new Ext.grid.Grid('el_emailgrid', {
ds: ds,
cm: cm,
loadMask: {msg: 'Retrieving emails...'}
});

When I open the page for the very first time, the box that contains 'Retrieving emails...' does not display/or is way off the screen in IE, but the alpha background does appear.

In FF - it partially appears top left of grid area - but not properly (it onlt displays bottom right of "loading" box).

But when I go to run the ds.load(); function, the mask appears as it should be.

Why does it not work the first time round?

[bizzare]

I call method ds.load() at last, after I create Grid, DataStore and ColumnModel. LoadMask works fine.

[badgerd]

I do have the ds.load(); line in place after I create the grid, data store and column model.

It still doesn't appear correct. Is there another way I can make the work correctly?

Here is a bit more of the code -



ColumnModel, Store etc is here.....

// create the grid
grid = new Ext.grid.Grid('el_emailgrid', {
ds: ds,
cm: cm,
loadMask: {msg: 'Retrieving emails...'}
});

// Lets render the grid now that we have all the information
grid.render();

// This is to mark the emails as read or un-read
grid.getView().getRowClass = function(record, index){
return (record.data.mailreadstatus==1 ? 'read-row' : 'unread-row');
};

// Lets load the data into the grid
ds.load();

[badgerd]

After investigating this further, in IE it does not display at all because the grid header does not yet appear, but in FF it only appears within the first line which is the grid header.

How can I force the grid to be displayed in full width/height initially so that the 'Retrieving emails...' message appears?

[badgerd]

Bump :(

[tryanDLS]

You'll have to post a link or a more complete example - the code you posted does not indicate anything that could be a problem.

[kuprishuz]

I have the same issue in both FF and IE, the loadmask appears to mask whatever the first element is (toolbar, grid headers, etc..) rather then masking the entire container.

edit: version 1.1 beta1

[badgerd]

I have attached 2 screen shots in Firefox and IE to "show" where the Loadmask should be appearing.

In IE the loadMask does not appear at all and needs to be where example is shown.

Here is actual grid code (js file) -



// create the grid
grid = new Ext.grid.Grid('el_emailgrid', {
ds: ds,
cm: cm,
loadMask: {msg: 'Retrieving emails...'}
});

// Lets render the grid now that we have all the information
grid.render();

// This is to mark the emails as read or un-read
grid.getView().getRowClass = function(record, index){
return (record.data.mailreadstatus==1 ? 'read-row' : 'unread-row');
};

// Lets load the data into the grid
ds.load();

// Lets sort the emails by date desc as default
ds.setDefaultSort('emaildate', 'desc');

// Grid listeners for mouse functions
grid.addListener('rowcontextmenu', onMessageContextMenu); // Right Click menu
grid.addListener("rowclick", rowClicked); //onClick
grid.addListener("rowdblclick", onRowDoubleClick); //onDblClick


CSS -



.ext-el-mask {
z-index: 20000;
position: absolute;
top: 0;
left: 0;
-moz-opacity: 0.5;
opacity: .50;
filter: alpha(opacity=50);
background-color: #CCC;
width: 100%;
height: 100%;
zoom: 1;
}
.ext-el-mask-msg {
z-index: 20001;
position: absolute;
left: 120px;
border:1px solid #8E8A7E;
background: #fff;
padding:2px;
}
.ext-el-mask-msg div {
padding:5px 10px 5px 10px;
background: #fff;
border:1px solid #A7A49A;
color:#333;
font:bold 12px tahoma, arial, helvetica, sans-serif;
cursor:wait;
text-align:center;
}

.x-mask-loading div {
padding:5px 5px 5px 5px;
background: #eee url( '../images/default/grid/loading.gif' ) no-repeat 5px 5px;
line-height: 16px;
}


How can I make the loadMask appear properly in the center of the panel when it first loads the grid?

The loadMask does work when there is data appearing afterwards when I refresh the grid or pass new data into it. I have added a "screen shot" of the way it does appear when I refresh the grid or pass new data into it.



Hope this all makes sense.

[badgerd]

Is this an issue that can be fixed? Or do I have to find a different loading mask method/solution?

[tryanDLS]

This may be fixed by Jack's change from this thread (http://extjs.com/forum/showthread.php?t=8189).

[badgerd]

Ahh ok no problem.

I will try find a different loading method.

[neongrau]

since i couldn't find any info on a workaround or fix, i just added this to my grid:



/* begin: workaround loadMask on first load misplacement */
this.grid.control.loadMask.disable();
this.grid.dataStore.on('load', this.grid.control.loadMask.enable, this.grid.control.loadMask);
/* end: workaround loadMask on first load misplacement */

[badgerd]

Where would I place the above code in this?



// lets create the grid
grid = new Ext.grid.Grid('el_emailgrid', {
ds: ds,
cm: cm,
enableDrag:false,
loadMask: {msg: 'Retrieving emails...'}
});

// Lets render the grid now that we have all the information
grid.render();

// This is to mark the emails as read or un-read
grid.getView().getRowClass = function(record, index){
return (record.data.mailreadstatus==1 ? 'read-row' : 'unread-row');
};

// Lets load the data into the grid
ds.load();

// Lets sort the emails by date desc as default
ds.setDefaultSort('emaildate', 'desc');

// Grid listeners for mouse functions
grid.addListener('rowcontextmenu', onMessageContextMenu); // Right Click menu
grid.addListener("rowclick", rowClicked); //onClick
grid.addListener("rowdblclick", onRowDoubleClick); //onDblClick

[attiato]

I do have the ds.load(); line in place after I create the grid, data store and column model.

It still doesn't appear correct. Is there another way I can make the work correctly?

Here is a bit more of the code -



ColumnModel, Store etc is here.....

// create the grid
grid = new Ext.grid.Grid('el_emailgrid', {
ds: ds,
cm: cm,
loadMask: {msg: 'Retrieving emails...'}
});

// Lets render the grid now that we have all the information
grid.render();

// This is to mark the emails as read or un-read
grid.getView().getRowClass = function(record, index){
return (record.data.mailreadstatus==1 ? 'read-row' : 'unread-row');
};

// Lets load the data into the grid
ds.load();

I had this problem too, loadMask was not displaying, but after I added in the store config
autoLoad:true the problem was solved...