PDA

View Full Version : How to make loading animation during loading a tree



yehezqiel
5 Jul 2010, 7:50 PM
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..

mankz
5 Jul 2010, 7:59 PM
Check out the LoadMask class, you could mask the treepanel element before load and clear it after.



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

yehezqiel
5 Jul 2010, 8:05 PM
ohh okay, i'll check it out...
thx 4 response..

yehezqiel
5 Jul 2010, 8:22 PM
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..

mankz
5 Jul 2010, 8:25 PM
To hide it again, call "unmask".

yehezqiel
5 Jul 2010, 8:53 PM
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


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


tree.on('xxx',function(n)
{
myMask.unmask();
}
);

mankz
5 Jul 2010, 9:15 PM
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
tree.on('beforeload', myMask.show, myMask);
tree.on('load', myMask.hide, myMask);

yehezqiel
5 Jul 2010, 11:40 PM
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


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

yehezqiel
5 Jul 2010, 11:59 PM
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


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

yehezqiel
6 Jul 2010, 12:13 AM
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


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

yehezqiel
6 Jul 2010, 7:37 PM
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


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

nosarious
28 Jul 2010, 11:50 PM
Hi there. This looks like it would work for a Sencah project of mine where I am building a series of carousel cards...

where would I place this code within my project to get it to work?

Any help would be appreciated.