PDA

View Full Version : how to set loadMask for TreeLoader when loading a node's child



shahab_et
16 Mar 2011, 8:32 AM
Hi everybody,

I have a treePanel and each node's children is loaded on demand,
What I want is to show a Loadmask (or something ) that shows this node's child's is loading.
I couldn't find a way to do that!

I would appreciate if some One helps me with that.

Thank you


var loader=new Ext.tree.TreeLoader(
{
url:'.../myresource?op=3'
});

AccB_LedgerTree.tree = new Ext.tree.TreePanel({
id:'AccB_ltree'
,autoScroll:true
,rootVisible:false
,root:{
nodeType:'async'
,id:'root'
,text:'Root'
,expanded:true
,uiProvider:false
}
,loader: loader
,tbar:['Filter:', {
xtype:'trigger'
,triggerClass:'x-form-clear-trigger'
,onTriggerClick:function() {
this.setValue('');
AccB_LedgerTree.tree.filter.clear();
}
,id:'filter'
,enableKeyEvents:true
,listeners:{
keyup:{buffer:150, fn:function(field, e) {
if (Ext.EventObject.ESC == e.getKey()) {
field.onTriggerClick();
}
else {
var val = this.getRawValue();
var re = new RegExp('.*' + val + '.*', 'i');
AccB_LedgerTree.tree.filter.clear();
AccB_LedgerTree.tree.filter.filter(re, 'text');
}
}}
}
}]
,listeners:{
'beforeexpandnode':function(node, deep, anim) {
if (node.id != 'root')
getNodeChild(node);// here is where Child nodes are loaded
}
}
});

pro.pablo
16 Mar 2011, 8:56 AM
I think a suitable solution is to add two more listeners to the TreePanel:



beforeload: function(n) {
_load_mask.show();
},
load: function(){
_load_mask.hide();
},


And also define _load_mask:



var _load_mask = new Ext.LoadMask(Ext.getBody(), {msg: 'Loading, please wait...'});


Note: You can apply the LoadMask to the TreePanel only

shahab_et
16 Mar 2011, 9:08 PM
thank you,

but is there a way that I use loadMask when user clicks a node?!

Thanks again

emils
16 Mar 2011, 11:04 PM
try to add listeners to nodes

shahab_et
17 Mar 2011, 12:52 AM
Could you please give me a sample code ?

Thanks

emils
17 Mar 2011, 1:10 AM
text:'Parent Node',
expanded: true,
singleClickExpand: true,
children:[{
text:'Child Node',
id: '1',
leaf:true,
listeners:{
click: function(node, e) {
do something here
}
}
}]