re-rendering tree at runtime

[nicrox]

hi,
I have:
an Ext.Toolbar.MenuButton(can't find any docos for this one guys)
an Ext.tree.TreePanel with a root node
2 function handlers addChildren and testI'm trying to achieve this:
click on a tool bar->menu->item
render tree with new childrene.g. click item 1 -> tree rendered with 1 item
click item 2 -> tree rendered with 2 items
click item 3 -> tree rendered with 3 items

Here's my code:


var root = new Ext.tree.AsyncTreeNode({
id : 'node',
text: 'Ext JS',
draggable:false,
expanded : true,
icon : './images/example.gif',
qtip : 'node',
cls : 'nodes'
});

var tree = new Ext.tree.TreePanel(tree_div, {
animate:true,
containerScroll: true,
rootVisible: false,
lines: false
});
tree.setRootNode(root);

var menu1 = new Ext.Toolbar.MenuButton({
text: 'menu1',
hidden: false,
menu: {items:[
{ text: '1st line',
id: '11',
handler: addChildren(1)
}, '-',
{ text: '2nd line',
id: '12',

handler: addChildren(2)}, '-',
{text: '3rd line',
id: '13',

handler: addChildren(3)}
]}
});

function addChildren(qty){
for(var i=0; i<qty; i++){
child[i] = new Ext.tree.AsyncTreeNode({
id : 'node'+i,
leaf : true,
text: 'Ext JS'+i,
draggable:false,
expanded : true,
qtip : 'node'+i,
cls : 'nodes'+i,
expanded : false
});
}
root.appendChild(child);
tree.render();
root.expand();
}

function test (item) {
Ext.MessageBox.alert(item.text+' Was Clicked', 'you clicked'+item.text, item.text);
}
Problem:
As soon as I refresh browser, tree is being rendered(function being called without anyclick).
Although, I have another function test which is only executed when a click has been happened.

Any suggestion is appreciated

[nicrox]

I seem to have found the solution.
if the function is being passed with a value, then it is fired up during compile-time:
e.g. handler : myFunc(item) <-- executed during compile time
but handler : myFunc <-- executed only during run-time

and if 1 requires to pass args to functions 1 can do that by accessing magic word "item" with any property being set previosly.

e.g.



var menu3 =new Ext.Toolbar.MenuButton({


text:'menu3',

hidden:false,

handler: addChildren,

myQty :3, // <-- **** "myQty does nothing in the code, its just a parameter for referencing later" ***

menu:{

items:[

{ text:'1st line',



id:'31',


handler: addChildren,

qty :5

},'-',



{ text:'2nd line',
id:'32',


handler: addChildren}]}


});


// now we can make use of myQty to get the parameter we wanted out

function



myFunc(item){

Ext.MessageBox.alert(' function param','this funtion has some qty passed to it from myQty'+item.text, item.text);

}


Hope this comes handy to some1

[redgrey]

many thanks, your post was pretty handy to me :)

workaround in case of simple handling procedures and "compile time" available variables to be passed, is to define anonymous handling function right in the place.
lets say we have two needed (local) variables
ctVar (= an at compile time availablevariable)
const (= constant)
the handler could be set up like


...
option:value,
handler: function(){ myNextSingleton.init(const, ctVar); }
...