PDA

View Full Version : Tree Panel as Navigational Menu



tomalex0
10 Oct 2011, 9:35 PM
Hi All,

I'm trying to implement tree panel which acts like a Navigational Panel. Actually it works fine, but i need to change a bit to have a better control.

We know that tree panel have click listener and if i implement a switch condition i can get each node click and can call separate functions.

But i'm looking for handler associated with each node. So if i mention below json as tree children it should trigger the function mentioned in handler



{
text: 'Jagaur',
leaf: true,
handler : function(){

}
}


This is the full code. I would eventually convert this as a separate navigational component. But first i have to figure out how can i mention separate click handler with each node.

Any help would be much appreciated :).


Ext.onReady(function() {

var node = new Ext.tree.TreeNode({
text: "Truck",
leaf: true,
handler : function(){

}
});

node.on('click', function(node1, e){
console.log(node1,"nodeclick");
});


var navigationTreeNode = new Ext.tree.AsyncTreeNode({
expanded: true,
expandable: false,
singleClickExpand :true,
nodeType: 'async',
iconCls: 'folder',
children: [node,{
text: 'Cycle',
cls: 'folder',
leaf : true,
handler : function(){
// show
}
}, {
text: 'Car',
cls: 'folder',
children: [{
text: 'Jagaur',
leaf: true
}, {
text: 'BMW',
leaf: true
}]
},{
text: 'Bike',
cls: 'folder',
children: [{
text: 'Honda',
leaf: true
}, {
text: 'Yamaha',
leaf: true
}]
}]
});



var navigationtree = new Ext.tree.TreePanel({
lines: false,
layout: 'fit',
loader: new Ext.tree.TreeLoader(),
root: navigationTreeNode,
rootVisible: false,
frame: false,
collapsed: false,
expanded: true,
expandable: false,
hideCollapseTool: true,
/*listeners: {
'click': function(node, e) {
console.log(node)
}
}*/
});

var win = new Ext.Window({
id: 'navigation',
width: 300,
height: 400,
shim: false,
resizable: false,
autoScroll: true,
maximizable: false,
animCollapse: false,
constrainHeader: true,
layout: 'fit',
scope: this,
items: [navigationtree]
});
win.show();
});

tomalex0
10 Oct 2011, 9:53 PM
Think i have got a solution, if it is achieved i will post back here :)