ExtJS 中的面包屑导航 [英] Breadcrumb in ExtJS

问题描述

如何在 ExtJS 设计中显示面包屑功能.

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.....

提前致谢

推荐答案

我想到了两个解决方案.

Two solutions come to my mind.

1. 使用面板标题.您必须操纵面板的标题并在其上创建面包屑.您必须创建面包屑文本，将其设置为面板的标题.您可以这样做:

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:

最初，您可以将其设置为只有文本 home title: 'Home'.在某个时间点，您使用 setTitle() 方法更新它.下面是一个例子:

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>');

您需要有一个逻辑来创建锚标记及其 ID.id 很重要，因为我们将使用它来关联操作.假设我有一个函数 sayHello 并在单击Level 1"时调用它:

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');
}

将此功能与用户点击级别 1 相关联是使用事件完成的:

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.使用 tbar.如果您不打算将 tbar 用于上述面板，则可以将其用作面包屑支架.在此方法中，您可以向工具栏添加操作或工具栏项.下面是一个例子:

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
]

您必须更改分隔符的 CSS 以显示>>"或您计划使用的其他符号.在这种情况下，您将不得不使用工具栏的 add &remove 操作面包屑的方法.

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.

这篇关于ExtJS 中的面包屑导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！