PDA

View Full Version : Using a Tree Panel for Navigation



Arkh
4 Oct 2012, 9:58 AM
Hello there Sencha community,

I am having trouble using a tree panel for navigation in Sencha Architect. I can't seem to find where to set the action or href or whatever it may be that tree panel would use for navigational purposes.

Where and what do I need to use in order to make the tree leaves have a click action?

Thank you very much in advance!
Mark

So far I have:


Ext.define('MyApp.view.LeftNavigation', {
extend: 'Ext.panel.Panel',
alias: 'widget.leftnavigation',

width: 250,
bodyBorder: false,
header: false,
title: 'Customer Name - Video Manager',

initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
border: false,
width: 250,
header: false,
title: 'Left Navigation',
root: {
text: 'Root node',
expanded: true,
children: [
{
text: 'Home',
leaf: true
},
{
expanded: true,
text: 'Conferences',
children: [
{
text: 'Scheduling Wizard',
leaf: true
},
{
text: 'Simple Scheduler',
leaf: true
},
{
text: 'Schedule an Event',
leaf: true
},
{
text: 'Conference Management',
leaf: true
}
]
},
rootVisible: false,
viewConfig: {

}
}
]
});

me.callParent(arguments);
}

});

scottmartin
4 Oct 2012, 11:18 AM
Simply place a listener on your treepanel:



listeners:{
'itemclick':function (tree, nodeId) {
this.syncNavigation(nodeId.data.id);
}
}


There is a good example that shows this in use:
http://cdn.sencha.io/ext-3-to-4-migration-pack.zip

Scott.

Arkh
4 Oct 2012, 12:09 PM
That is definitely a step in the right direction. I will continue to work on this tomorrow and if I can't figure it out completely I will ask more questions, but if I can figure it out based on what you provided I will accept your answer.

Thank you,
Mark