ExtJS中的面包屑

如何在ExtJS设计中显示面包屑特性

我使用带边框布局的面板，我想在面板顶部设计碎屑特征 请寄给我一些样品

---

提前感谢

我想到了两个解决方案

使用面板标题。您将不得不操纵面板的标题并在其上创建面包屑。您必须创建面包屑文本，并将其设置为面板标题。以下是您可能会做的：

最初，您可以将其设置为只有文本home

标题：“home”

。在某个时间点，您可以使用

setTitle（）

方法更新它。以下是一个例子：

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

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

使用以下事件将此功能与级别1的用户单击关联：

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

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

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

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

方法来操作面包屑。

也许这会有所帮助。这是一个插件…扩展的ext工具栏，使面包屑。它有一个如何使用它的例子。

---

EXT 6将breadcrumb EXT.toolbar.breadcrumb xtype:breadcrumb作为本机组件。它接受树存储，并且存在一些问题，例如更新根节点。此外，在更新存储之后，还需要在新添加的记录上显式调用set selection

Ext.create('Ext.toolbar.Breadcrumb', {
            store: "[any tree.store]",
            useSplitButtons: false,
            enableFocusableContainer: false,
            rootVisible: true
        }

---

非常感谢你的重播，在我的场景中，setTitle是最合适的