Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to make loading animation during loading a tree

  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Smile How to make loading animation during loading a tree

    Hi all..
    I want to ask how to make loading animation during loading a tree..

    the loading animation should appear before the tree appear..

    thx b4..

  2. #2
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153

    Default

    Check out the LoadMask class, you could mask the treepanel element before load and clear it after.

    Code:
    yourTreePanel.el.mask('Test', 'x-mask-loading'););

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Default

    ohh okay, i'll check it out...
    thx 4 response..

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Default

    the loading animation now appear..
    but i'm confused how to stop it when the tree appear..

    can someone tell me, how to do that..
    i'm still newbie in extjs..

  5. #5

  6. #6
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Default

    thx 4 ur guidline..

    hhm, i've look in documentation, but i can't found any keyword to use after the tree has been loaded..

    my code is like this
    Code:
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    tree.on('load',function(n)
    {          
       myMask.show();
    }
    );
    now what keyword must i use to replace xxx, to show that the tree has been loaded..??
    Code:
    tree.on('xxx',function(n)
     {          
        myMask.unmask();
     }
     );

  7. #7
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153

    Default

    Code:
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    tree.on('beforeload', myMask.show, myMask);
    tree.on('load', myMask.hide, myMask);

  8. #8
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Default

    Quote Originally Posted by mankz View Post
    Code:
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    tree.on('beforeload', myMask.show, myMask);
    tree.on('load', myMask.hide, myMask);
    sorry that's not work, if i try like this
    Code:
       tree.on('beforeload',function(n)
       {
                Ext.Msg.alert("before load");
        }
        );
    
        tree.on('load',function(n)
        {
                Ext.Msg.alert("load");
        }
        );
    in browser only appler alert "load" while alert "before load" was not appear..
    if script tree.on('load') was commented, then the alert able to appear..

  9. #9
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Default

    Quote Originally Posted by mankz View Post
    Code:
    var myMask = new Ext.LoadMask(Ext.getBody(),  {msg:"Please wait..."});
    tree.on('beforeload', myMask.show, myMask);
    tree.on('load', myMask.hide, myMask);
    sorry that's not work, if i try like this
    Code:
        tree.on('beforeload',function(n)
       {
                 Ext.Msg.alert("before load");
        }
        );
    
         tree.on('load',function(n)
        {
                 Ext.Msg.alert("load");
        }
        );
    in browser only appler alert "load" while alert "before load" was not appear..
    if script tree.on('load') was commented, then the alert able to appear..

  10. #10
    Sencha User
    Join Date
    May 2010
    Posts
    23

    Default

    Quote Originally Posted by mankz View Post
    Code:
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    tree.on('beforeload', myMask.show, myMask);
    tree.on('load', myMask.hide, myMask);
    sorry that's not work, if i try like this
    Code:
       tree.on('beforeload',function(n)
       {
                Ext.Msg.alert("before load");
        }
        );
    
        tree.on('load',function(n)
        {
                Ext.Msg.alert("load");
        }
        );
    in browser only appler alert "load" while alert "before load" was not appear..
    if script tree.on('load') was commented, then the alert able to appear..

Page 1 of 2 12 LastLast

Similar Threads

  1. how center a loading animation?
    By tBSTAR in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 15 Apr 2009, 10:39 AM
  2. loading animation hangs when loading html
    By FoxMulder900 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 28 Dec 2008, 10:21 PM
  3. Replies: 7
    Last Post: 23 Jul 2008, 8:35 AM
  4. Replies: 1
    Last Post: 20 May 2008, 9:47 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
  •