面包屑在ExtJS [英] Breadcrumb in ExtJS

问题描述

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

How to display Breadcrumb feature in ExtJS designs.

Iam使用Panel with borderlayout，我想在面板上设计面包屑
请发送给我一些样本.....

Iam using Panel with borderlayout, i want to design crumb feature on top of panel please send me some samples.....

感谢提前

推荐答案

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

1. Use the panel title. You will have to manipulate the title of your panel and create the breadcrumb on it. You will have to create the breadcrumb text, set it to the panel's title. Here is what you might do:

最初，您可以将其设置为仅将文本置于标题： '首页'。在某些时间点，您可以使用 setTitle（）方法更新它。以下是一个示例：

Initially, you may set it to have just the text home title: 'Home'. At some point of time you update it using setTitle() method. Here is an example:

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

您需要有一个逻辑来创建锚标签及其标识。该ID很重要，因为我们将使用它来关联动作。让我说我有一个函数sayHello，当我点击Level 1时，我调用它：

You need to have a logic to you create the anchor tag and its id. The id is important because, we will use it to associate the action. Lets say I have a function sayHello and I call it when "Level 1" is clicked:

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

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

Associating this function to the user click of the Level 1 is done using events:

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

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

2.Use the tbar. If you don't plan to make use of the tbar for the said panel, you can make use of it as your breadcrumb holder. In this method, you can add actions, or toolbar items to the toolbar. Here is an example:

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

在您的面板中，您可以：

And in your panel you can have:

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

您将不得不更改分隔符的CSS以显示>>或您打算使用的其他符号。在这种情况下，您必须使用工具栏的添加& 删除操纵面包屑的方法。

You will have to change the CSS for the separator to show ">>" or other symbols you plan to use. In this case, you will have to use the Toolbar's add & remove methods to manipulate the breadcrumb.

这篇关于面包屑在ExtJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！