ExtJS 中的面包屑导航

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

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

提前致谢

我想到了两种解决方案。

1. 使用面板标题。您将必须操纵面板的标题并在其上创建面包屑。您必须创建面包屑文本，并将其设置为面板的标题。您可以执行以下操作：

最初，您可以将其设置为仅包含文本 hometitle: 'Home'。在某个时间点您使用更新它setTitle()方法。这是一个例子：

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

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

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

将此函数与级别 1 的用户点击相关联是使用事件完成的：

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

2.使用t栏。如果您不打算将 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操纵面包屑的方法。