Results 1 to 10 of 10

Thread: loadMask doesn't show while rendering a Window

  1. #1
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Question loadMask doesn't show while rendering a Window

    I have a Grid that opens a Detail window when the user doubleclicks a row.
    Since complex Detail windows take some time to render,
    I'd like to activate the loadMask of the Grid during this time.

    Here is a showcase that demonstrates how I think this should be done.
    But (and this is my problem) the loadMask becomes visible only when I open an alert box
    before calling the detail window.
    Who knows how I can have the loadMask become visible *without* opening an alert box?

    To run the showcase:
    http://lino.googlecode.com/hg/extjs-showcases/21.html

    To see the source code:
    http://code.google.com/p/lino/source...wcases/21.html

  2. #2
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Vote Rating
    1593
      1  

    Default

    Try hiding the load mask after the window has rendered.

    Your code:
    PHP Code:
    function show_detail(grid) {
      var 
    win = new Ext.Window({ 
        
    layout"fit"width400height:400,
        
    title"Detail"
        
    items: new Ext.FormPanel({ 
          
    layout'fit'
          
    items: new Ext.form.DisplayField({
            
    html:"This is a detail window which took 2 seconds to render."
          
    })
        })
      });
      
    // emulate a complex form that needs some time for rendering:
      
    sleep(1000); 
      
    win.show()
    }

    var 
    do_alert = new Ext.form.Checkbox({boxLabel:'show alert box before opening detail',value:false,width:"20em"});

    function 
    onDoubleClick(grid) {
      
    grid.loadMask.show();  
      if (
    do_alert.getValue()) 
        
    alert("This alert box is (currently) needed for the loadMask to become visible. Who knows why?");
      
    show_detail(grid);
      
    grid.loadMask.hide();

    What I might suggest:
    PHP Code:
    function show_detail(grid) {
      var 
    win = new Ext.Window({ 
        
    layout"fit"width400height:400,
        
    title"Detail"
        
    items: new Ext.FormPanel({ 
          
    layout'fit'
          
    items: new Ext.form.DisplayField({
            
    html:"This is a detail window which took 2 seconds to render."
          
    })
        }),
        
    listeners: {
            
    'afterrender': function(thisComponent) {
                  
    grid.loadMask.hide();
            }
        }
      });
      
    // emulate a complex form that needs some time for rendering:
      
    sleep(1000); 
      
    win.show()
    }

    var 
    do_alert = new Ext.form.Checkbox({boxLabel:'show alert box before opening detail',value:false,width:"20em"});

    function 
    onDoubleClick(grid) {
      
    grid.loadMask.show();  
      if (
    do_alert.getValue()) 
        
    alert("This alert box is (currently) needed for the loadMask to become visible. Who knows why?");
      
    show_detail(grid);

    In other words, you're currently hiding the load mask before the window has physically rendered.

  3. #3
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default

    Thank you, Arthur.
    I tried it:
    http://lino.googlecode.com/hg/extjs-showcases/21a.html

    But sorry, that didn't work either.

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    47
    Vote Rating
    0
      0  

    Default

    it shows loadmask after window is created...
    http://infosite.org.ua/ext/grid_loadmask.php

    Seems, this mask needs to be rewritten, to have event "afterload", so first your show it, then from this even handler it start create af window ...

  5. #5
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default

    Can you post some code snippets?
    It sounds promising, but I never used lightboxes and iframes and a code snippet would maybe save me a lot of time.

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    47
    Vote Rating
    0
      0  

    Default

    Snippet is problem, am using complex JS structure, from now 6 files ... for a grid. So it will be not informative att all.

    take look at fancybox.

    Invoce as $.fancybox({ with type: 'iframe' ...

    I use jquery adapter for this, it is very usefull

    So click
    show popup with fancy
    there load first page
    in it make lcaqtion.hre to second, long loading

    To process click:


    Code:
        listeners:
        {
    
            'cellclick':{
    
    
    
              fn: function ( grid_, row_, col_, e_ ) {
    PS. Take look here ...
    Link with word (Example).
    SO same can be done with "loading" window, i think.

    Even if use resized fancy, it will be looking better...

  7. #7
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default

    Hm... so you are mixing jQuery and ExtJS. Sounds complicated.
    I hope and believe that there is a simpler way to solve this.
    Why does the alert() box cause the loadMask to be rendered?
    Maybe I should switch to ExtJS 4 first?

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    47
    Vote Rating
    0
      0  

    Default

    Maybe your is searching answer - not a way to solve the _problem_.
    Am also interesting in it, butt seems that ext team is not interested show answer - only for money
    Have same - unsolved problems, i unserstood your ... cant resolve this.

    PS. Here is adapter to jquery ... included in ext inside. For some purpose, how do your think ?

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    129
      0  

    Default

    Javascript is single threaded and some browsers won't update the screen while the thread is running.

    This means that if you show a mask and then continue with heavy processing, it will show the mask AFTER the processing is done.

    You need to give the browser a little time to show the mask, e.g.
    Code:
    loadMask.show();
    (function(){
      // do stuff
      loadMask.hide();
    }).defer(10);

  10. #10
    Sencha User
    Join Date
    Jan 2011
    Posts
    47
    Vote Rating
    0
      0  

    Default

    Yes, this resolves a problem...
    good lesson, thanks.

Similar Threads

  1. Fully rendering a window and all it's contents before a call the .show
    By gordonk66 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Jan 2010, 9:53 AM
  2. loadmask does not show in window
    By kora.kanchan in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 23 Apr 2009, 4:46 AM
  3. Replies: 9
    Last Post: 11 Sep 2008, 5:27 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •