extjs - ExtJS 中的面包屑导航

Question

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

我正在使用带边框布局的面板，我想在面板顶部设计面包屑功能
请寄给我一些 sample .....

提前致谢

Answer 1

我想到了两个解决方案。

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

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

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

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

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

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

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

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

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

在您的面板中，您可以拥有:

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

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