Question

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

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

西方：它有一个树状小组。

center：它有标签面板。

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

********* 我的应用程序主页中标题的要求与Sencha主页http://www.sencha.com/products/extjs/的标题完全相同，其中< / p>

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

现在，我的问题是：

我是否应该使用图片作为标题，如果我可以使用图像，那么我是否可以将图标放在该图像上。？
我是否应该使用工具栏，我可以将徽标和名称放在左侧，然后使用tbfill并将图标放在最后。？

如果这不是为主页创建标题的正确方法，那么有人可以指导我采用任何其他更好的方法吗？

提前致谢

Answer 1

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

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

我鼓励您查看kitchen sink site的来源。这几乎是他们正在做的......

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();
   }
});

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

1 个答案: