Question

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

我使用带有borderlayout的面板，我想在面板顶部设计面包屑功能请寄给我一些样品......

提前致谢

Answer 1

我想到了两种解决方案。

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

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

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

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

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

使用事件：

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才能显示“＆gt;＆gt;”或您计划使用的其他符号。在这种情况下，您必须使用工具栏的add＆amp; remove方法来操纵面包屑。

Answer 2

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

Answer 3

EXT 6有面包屑Ext.toolbar.Breadcrumb xtype：breadcrumb作为本机组件。它接受树存储并且存在诸如更新根节点之类的问题。更新存储后，您还需要在新添加的记录上显式调用set selection。

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

ExtJS中的面包屑

3 个答案: