View Full Version : Create breadcrumb navigation that reflects the tree panel.

25 Jan 2013, 3:34 AM
Hi All,

I have a border layout with a tree panel in west region, and on click of the Tree i.e, Parent node, child node and sub-child node....etc. i should be able to display the path through a breadcrumb in the center panel.

For Ex, if this is my treeview : Country
-- City
Then i should be able to display the breadcrumb as follows :
Country>> State>> City

Can anyone provide me a solution of how can I achieve this?

25 Jan 2013, 9:54 AM
You might use the NodeInterface's getPath (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-method-getPath)method. Here's a simple example (you might want to massage the output to use '>' or drop the 'Root' or whatever).

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners: {
itemclick: function (view, rec) {