PDA

View Full Version : Creation of help page using treepanel.



RockyIndian
12 Dec 2013, 3:11 AM
Hi, I want to create a help page. Tree structure on the left side and a panel on the right side. When I click on the tree nodes, the contents in the right side panel should change. I have created tree on the left side. But I don't know how to change the contents on the right side by clicking the children of the trees. Please help me with it. Thank you.

Here's my tree code.

Ext.ns('A.H');
A.H = {
init : function() {
this.helpScreen().show();
},
helpScreen : function() {


var tree = new UIFactory.tree.TreePanel({
title : 'Tree',
region : 'west',
width : '30%',
autoScroll : true,
split : true,
collapseMode : 'mini',
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
nodeType : 'async',
id : 'root',

children : [{"text" : "Admin", "leaf" : false, "icon" : "images/menu-help.png", "children" : [
{"text" : " Load", "icon" : "images/menu-help1.jpg", "leaf" : true

},
{"text" : "Users", "icon" : "images/menu-help1.jpg", "leaf" : true,

}]
},
{"text" : "Disc", "leaf" : false, "icon" : "images/menu-help.png", "children" : [
{"text" : "Batch", "icon" : "images/menu-help1.jpg", "leaf" : true

},
{"text" : "data", "icon" : "images/menu-help1.jpg", "leaf" : true

},
{"text" : "Mdata", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Review", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Requirements", "icon" : "images/menu-help1.jpg", "leaf" : true}
]
},
{"text" : "An", "leaf" : false, "icon" : "images/menu-help.png", "children" : [
{"text" : "Complexity", "leaf" : false, "icon" : "images/menu-help.png", "children" :
[{"text" : "Parameter", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Inputs", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Group ", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Compl", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Dxity", "icon" : "images/menu-help1.jpg", "leaf" : true}
]
},
{"text" : "Mig", "leaf" : false, "icon" : "images/menu-help.png", "children" :
[{"text" : "Gro, "icon" : "images/menu-help1.jpg", "leaf" : true}
]
},
{"text" : "Quality", "leaf" : false, "icon" : "images/menu-help.png", "children" :
[{"text" : "Metric", "icon" : "images/menu-help1.jpg", "leaf" : true},
{"text" : "Process", "icon" : "images/menu-help1.jpg", "leaf" : true}
]
}

]
},
{"text" : "Desi", "leaf" : false, "icon" : "images/menu-help.png", "children" : [
{"text" : "Rules", "icon" : "images/menu-help1.jpg", "leaf" : true

},
{"text" : "Summary", "icon" : "images/menu-help1.jpg", "leaf" : true
},
{"text" : "Components", "icon" : "images/menu-help1.jpg", "leaf" : true}

]
}



]
}),
rootVisible : false
});
var west = new Ext.Panel({

region : 'west',
width : "30%",
collapseMode : 'mini',
floatable : false,
collapsible : false,
split : true,
items : [tree]

});
var center = new Ext.Panel({
title : 'Center Region',
region : 'center',
html :'<p>panel</p>'
});
var myBorderPanel = new Ext.Panel({
layout : 'border',
items : [tree, center]
});


var helpWindow = new UIFactory.window.StandardWindow({
items : [myBorderPanel]
});
return helpWindow;
}
};

greg.barry
20 Dec 2013, 11:38 AM
I would recommend starting off by giving your Center Region a Card Layout. Then, on each node click, (using the click event listener) you can swap cards.

There's another thread that answered a very similar question:
http://www.sencha.com/forum/showthread.php?102523-BorderLayout-Dynamic-center-region-changes

Thanks!
Greg