PDA

View Full Version : Ext.List LoadMask not centered when list is not visible when loading begins



aratcliffe
27 Dec 2010, 10:07 PM
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
28 Dec 2010, 5:06 PM
Try showing the new tab before store.read is fired.

headkit
12 Aug 2011, 2:24 AM
same problem here when I reload the list content the mask is on top left.
on first load it is centered well.

RunPixelRun
25 Aug 2011, 7:09 AM
I'm getting the same issue as headkit.
Is there a solution?

jd11
1 Sep 2011, 6:02 AM
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
1 Sep 2011, 6:10 AM
how doea that work?

jd11
1 Sep 2011, 6:28 AM
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
16 Sep 2011, 9:19 AM
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
16 Sep 2011, 10:32 AM
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
29 Sep 2011, 1:56 PM
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.

headkit
17 Nov 2011, 2:17 AM
worked. thanx!
but now I have a grey overlay which I didn't have had before...