Ext.LoadMask not centered in component.

[chinabuffet]

Say you have an Ext.grid.GridPanel, and you configure it with the loadMask option. Say you then do a:

grid.on("render", function() {
  store.load();
});

Although the grid has technically rendered, it's layout may be recalculated multiple times before its finally done getting resized (if its contained inside of other containers/layouts). The problem is that the LoadMask's "Loading..." text is shoved up into the upper region of the grid panel, because it appears to be centering itself on the render-time height of the grid panel, not it's finished size. As a result, the loading mask appears kind of silly because the text is in the upper-left corner.

One way I've found to fix this is by doing a defer on the store.load()... but that seems very hackish and seems unnecessary to have to repeat that all over the place

Any suggestions?

[chinabuffet]

Suggestions anyone? Really hoping there is a standard way of doing this.

[MarkoM]

I have lost a lot of hair because of this and the only somewhat working workaround is to play with defer, but still for some browsers and computers the time might be too low or too high and you never get it really as you wanted. I really hope this would get proper resolution.

[Condor]

If you really feel that this is important, then you could recenter the mask in the afterlayout event.

[MarkoM]

We use a lot of windows with forms which are loaded during the windows creation so it doesn't really give professional feeling if the Loading text rolls in the window corner instead of where it should be. Thanks for the afterlayout suggestion, it works better now with that, but I still think the proper behavior should come out-of-the-box.

[Mango_lier]

Try loading the store in afterrender event

this.on('afterrender', function(){
    this.store.load();
}); 

[chinabuffet]

The problem with that is then the user has to wait for the page to finish rendering before the data can begin loading. It seems kind of silly to make the user wait longer just so they can watch a correctly resized loading mask. In a large application, that extra time can be significant and give the application a sluggish feel... especially for users with slow computers or expensive queries.

I had initially considered this before posting as well, but I'd almost rather have the loading mask look goofy instead =\

[MarkoM]

We're in the very same situation and in most of the times the store gets loaded before the window is rendered but sometimes it get so much more longer that the mask is needed.

I ended up adding loaded: false to the store and once afterlayout event is triggered, it checks the value and masks the window if needed. Loaded is set to true on store's load event. Seems to work pretty well.

The mask doesn't seem to go berserk even when afterlayout is coming 3-4 times quickly in a row and mask() is called every time.

[jboesch]

I was having this problem too. Loading json from Ext.data.Store. It would pop up the loader mask and it would be centered the first time, but as soon as I clicked on another tab it would go off to the left. BOOOO.

I fixed this by adding this bit of CSS:

.x-mask {
    left: 0 !important;
    width: 100% !important;
}