Ext.List LoadMask not centered when list is not visible when loading begins

[aratcliffe]

I have an Ext.List component which is one of 2 items belonging to an Ext.TabPanel. If loading of the store the list is bound to is initiated when the other child of the tabpanel is active, when I switch to the list its LoadMask is positioned in the top left corner of the list rather than centered.

Is there a straightforward way to recenter the LoadMask if visible when the list is activated?

Cheers
Adam

[senchauser2010]

Try showing the new tab before store.read is fired.

[headkit]

same problem here when I reload the list content the mask is on top left.
on first load it is centered well.

[RunPixelRun]

I'm getting the same issue as headkit.
Is there a solution?

[jd11]

thx senchauser2010
This worked for me. I suggest to the others trying it out.

Would be interesting to know, why it has to be this way.

[headkit]

how doea that work?

[jd11]

in my case load the store from a controller. so i just pushed the view via setActiveItem to be visible and then i load the store...

app.views.search.setActiveItem(
            app.views.srcRsltDetail, options.animation
        );


// load store
app.stores.search_result_details.load();

so you have to check when is your store loaded/read. before that happens the view must be visible already.

[lylepratt]

I've been searching for a good solution to this problem for a while. There are many times when you want to start loading a store BEFORE the list bound to it is shown and the "solution" of showing the list before you load it is not a solution at all. doLayout() and doComponentLayout() before calling load both do nothing.

If anyone else has a more elegant solution, I'd love to know it.

[lylepratt]

I think I just found a better solution to this. In your parent Panel that the list lives in, set a listener for the "activate" event. In that listener, check to see if your underlying store is loading or not. If it is, call "setLoading" on the list to get it to rerender the loading mask. This does not reload the store, it just puts the mask on the list. The store will still remove the mask when it finishes loading.

    listeners: {
        activate: function() {
            if(app.stores.MyStore.isLoading()) {
                app.views.MyParentListPanel.items.items[0].setLoading(true);  //items.items[0] is the list inside
            }
        }
    },

[brink]

Adding listeners to everything is not very DRY for me. My solution to this particular problem is view-oriented. Since this is effectively something that shouldn't be handled in code everywhere, I just blew away the height and width on the .x-mask

this solution is bad CSS due to the use of !important, but it's better than modifying all of my panels

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

YMMV, that basically makes EVERY mask fill its bounds. I have no guarantee that each of your masks is going to be contained in a container -- it may be in something that's 'position: fixed' or the like. Fair warning.