1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    34
    Vote Rating
    0
    aratcliffe is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    44
    Vote Rating
    0
    senchauser2010 is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    104
    Vote Rating
    0
    headkit is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    12
    Vote Rating
    0
    RunPixelRun is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    jd11 is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    104
    Vote Rating
    0
    headkit is on a distinguished road

      0  

    Default


    how doea that work?

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    jd11 is on a distinguished road

      0  

    Default


    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...

    Code:
    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.

  8. #8
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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.
    Twitter: lylepratt

  9. #9
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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.

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

  10. #10
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default


    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

    PHP Code:
    .x-mask {    height100% !important;    width100% !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.

Similar Threads

  1. Ext.LoadMask not centered in component.
    By chinabuffet in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 21 Oct 2011, 1:28 PM
  2. Replies: 0
    Last Post: 3 Dec 2010, 7:06 AM
  3. putting Ext.List in Ext.NestedList - List data does not load
    By mmww in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 14 Oct 2010, 9:39 PM
  4. putting Ext.List in Ext.NestedList - List data does not load
    By mmww in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 14 Oct 2010, 10:54 AM
  5. Is Combobox list visible?
    By dyke.ecl in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Jun 2009, 4:28 AM

Thread Participants: 6