ExtJS中的面包屑

问题描述

如何在ExtJS设计中显示面包屑功能。 我使用带有borderlayout的面板，我想在面板顶部设计面包屑功能 请给我一些样品..... 提前致谢     

解决方法

我想到两种解决方案。 使用面板标题。您将必须操纵面板的标题并在其上创建面包屑。您将必须创建面包屑文本，并将其设置为面板的标题。您可以执行以下操作： 最初，您可以将其设置为仅带有文本主页“ 0”。您有时会使用

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.使用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\',\'Level 2...\');
    }               
});

在面板中，您可以：

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

您将不得不更改分隔符的CSS，以显示\“ >> \”或您计划使用的其他符号。在这种情况下，您将必须使用工具栏的

add

和

remove

方法来操纵面包屑。     ,EXT 6具有面包屑Ext.toolbar.Breadcrumb xtype：breadcrumb作为本机组件。它接受树存储并存在一些问题，例如更新根节点。同样，在更新存储后，您需要在新添加的记录上显式调用集合选择。

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

    ,也许这会有所帮助。这是一个插件...用于ext工具栏的扩展，用于制作面包屑。它有一个如何使用它的示例。 https://github.com/scirelli/ExtjsBreadCrumbs