ExtJS4:应用程序主页的标题..使用图像或工具栏。。？

我正在开发一个使用ExtJS4作为前端的应用程序。现在，我正在为我的应用程序的主页使用边框布局。我将在此处描述边框布局中的组件：

north：它有一个标题和一个工具栏/菜单

韦斯特：它有一个树面板

中心：它有选项卡面板

现在，我的问题与标题有关…标题由左侧的应用程序徽标和应用程序名称以及右侧显示用户名、注销、帮助等的按钮/图标组成。此外，它下面的菜单将根据当前用户拥有的权限显示按钮

*********我的应用程序主页中的标题要求与Sencha主页的标题要求完全相同，其中

• 第一行有Sencha徽标，左边有Sencha名称。在右边，我有我的用户名，注销等等
• 第二行是工具栏/菜单，其中包含各种选项

下面是我的问题：

我是否应该使用图像作为标题，如果我可以使用图像，那么我是否能够在该图像上放置图标

我是否应该使用一个工具栏，其中我可以将徽标和名称放在左侧，然后使用tbfill并将图标放在末尾

如果这不是为主页创建标题的正确方法，请有人指导我其他更好的方法

---

提前感谢

也许可以尝试从一个带有hbox布局的普通旧容器开始。它可以有两个项：第一个（左）项可以是图像，第二个（右）项可以是另一个容器（甚至是一个工具栏），用于管理按钮/链接/任何内容

这样做的好处是，您可以在内容、宽度等方面独立控制每个部分（右侧和左侧）

我鼓励你去寻找这个问题的根源。这就是他们正在做的

Ext.define("KitchenSink.view.Header", {
   extend: "Ext.Container",
   title: "Ext JS Kitchen Sink",
   height: 52,
   layout: {
       type: "hbox",
       align: "middle"
   },
   initComponent: function() {
       ...
       this.items = [
          {xtype: "component",id: "app-header-logo"}, 
          {xtype: "component",id: "app-header-title",html: this.title,flex: 1}
       ];
       if (!Ext.getCmp("options-toolbar")) {
          this.items.push({xtype: "themeSwitcher"})
       }
       this.callParent();
   }
});