javascript - 如何将工具栏添加到视口(viewport)？

Question

我正在尝试将工具栏添加到视口(viewport)，但是当尝试使用下面的代码完成此操作时，它根本没有出现(仅显示选项卡面板)。

Ext.define(CONFIG.APP_NS+'.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: {
        type: 'border'
    },
    this.dockedItems = [
        {
            xtype: 'maintoolbar'
        }
    ],
    this.items = [
        {
            region: 'center',
            xtype: 'maintabpanel'
        }
    ];
});

// MainToolbar
Ext.define(CONFIG.APP_NS+'.view.MainToolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.maintoolbar',

    initComponent: function () {
        this.items = [
            // <...>
        ]
    }
});

我知道我可以将它添加到北部地区，但随后它出现时带有边框并且 border: false 什么都不做。

我做错了什么？

Answer 1

安Ext.container.ViewPort没有名为 dockedItems 的属性，只有 Ext.panel.Panel 有。这就是您的工具栏未显示的原因，它被完全忽略，因为视口(viewport)不知道如何处理 dockedItems。

我会像您建议的那样将工具栏放在北部地区。

border: false 配置目前在工具栏中不起作用，这是一个已知错误。在 Sencha 论坛上发布帮助文章可能是值得的，在那里您可以从 ExtJS 团队获得一些帮助。