Breadcrumb in ExtJS

Question

How to display Breadcrumb feature in ExtJS designs.

Iam using Panel with borderlayout, i want to design crumb feature on top of panel please send me some samples.....

Thanks In Advance

Answer 1

Two solutions come to my mind.

1. Use the panel title. You will have to manipulate the title of your panel and create the breadcrumb on it. You will have to create the breadcrumb text, set it to the panel's title. Here is what you might do:

Initially, you may set it to have just the text home title: 'Home'. At some point of time you update it using setTitle() method. Here is an example:

panel.setTitle('Home >> ' + '<a id="levelone" href="#">Level 1</a>');

You need to have a logic to you create the anchor tag and its id. The id is important because, we will use it to associate the action. Lets say I have a function sayHello and I call it when "Level 1" is clicked:

var sayHello = function(){
    alert('Hello Text');
}

Associating this function to the user click of the Level 1 is done using events:

var level1 = Ext.get('levelone');
level1.on('click', sayHi);

2.Use the tbar. If you don't plan to make use of the tbar for the said panel, you can make use of it as your breadcrumb holder. In this method, you can add actions, or toolbar items to the toolbar. Here is an example:

var action = new Ext.Action({
    text: 'Level 1',
    handler: function(){
        Ext.Msg.alert('Action', 'Level 1...');
    }               
});

var action1 = new Ext.Action({
    xtype: 'tbtext',
    text: 'Level 2',
    handler: function(){
        Ext.Msg.alert('Action', 'Level 2...');
    }               
});

And in your panel you can have:

tbar: [
 action,'-',action1,'-',action2
]

You will have to change the CSS for the separator to show ">>" or other symbols you plan to use. In this case, you will have to use the Toolbar's add & remove methods to manipulate the breadcrumb.