1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    230
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default Ext.LoadMask not centered in component.

    Ext.LoadMask not centered in component.


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

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

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    230
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default


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

  3. #3
    Ext User MarkoM's Avatar
    Join Date
    Jan 2010
    Posts
    3
    Vote Rating
    1
    MarkoM is on a distinguished road

      0  

    Default


    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.
    Crandion LLC
    Quality Software, Quality Service

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

  5. #5
    Ext User MarkoM's Avatar
    Join Date
    Jan 2010
    Posts
    3
    Vote Rating
    1
    MarkoM is on a distinguished road

      1  

    Default


    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.
    Crandion LLC
    Quality Software, Quality Service

  6. #6
    Sencha User Mango_lier's Avatar
    Join Date
    Apr 2007
    Posts
    191
    Vote Rating
    0
    Mango_lier is on a distinguished road

      0  

    Default


    Try loading the store in afterrender event

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

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    230
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default


    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 =\

  8. #8
    Ext User MarkoM's Avatar
    Join Date
    Jan 2010
    Posts
    3
    Vote Rating
    1
    MarkoM is on a distinguished road

      0  

    Default


    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.
    Crandion LLC
    Quality Software, Quality Service

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    6
    Vote Rating
    0
    jboesch is on a distinguished road

      0  

    Default


    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:

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

Similar Threads

  1. Replies: 0
    Last Post: 9 Feb 2010, 3:11 AM
  2. ext.window not centered
    By Traktopel in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 8 Jul 2009, 6:47 AM
  3. LoadMask not centered when grid in tabpanel
    By MacSimon in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 26 Feb 2009, 5:21 AM
  4. LoadMask doesn't work with Window component
    By maomao_977 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 5 Oct 2007, 10:49 AM
  5. Switch existing html component to ext component
    By harishns in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 3 Sep 2007, 12:58 AM

Thread Participants: 4

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar