需要带有dockedItems的EXTJS4应用程序示例

以下应用程序在某些HTML顶部显示工具栏：

Ext.application({
    name: 'app',
    appFolder: 'app',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
            {
                region: 'north',
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    text: 'Button'
                }]
            },
            {
                region: 'center',
                html: '<img src="resources/images/image.png">'
            }]
        });
    }
});

Ext.application({
名称：“应用程序”，
appFolder:'应用'，
启动：函数（）{
Ext.create（'Ext.container.Viewport'{
布局：“边框”，
项目：[
{
地区：'北'，
xtype:'工具栏'，
项目：[{
xtype:'按钮'，
文本：“按钮”
}]
},
{
地区：'中心'，
html:'
}]
});
}
});

但以下情况并非如此：

Ext.application({
    name: 'app',
    appFolder: 'app',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    text: 'Button'
                }]
            }],
            items: [
            {
                html: '<img src="resources/images/image.png">'
            }]
        });
    }
});

Ext.application({
名称：“应用程序”，
appFolder:'应用'，
启动：函数（）{
Ext.create（'Ext.container.Viewport'{
布局：“适合”，
摘要：[{
码头：“顶部”，
xtype:'工具栏'，
项目：[{
xtype:'按钮'，
文本：“按钮”
}]
}],
项目：[
{
html:'
}]
});
}
});

不幸的是，我找不到太多关于使用dockedItems的文档。我做错了什么？

dockedItem是

Ext.panel.AbstractPanel

（和子类）的一个特性。例如，

Ext.container.container

或

Ext.container.Viewport

中不支持它

使用面板而不是视口（或者，在视口中嵌套面板）来显示项目：

Ext.application({
名称：“应用程序”，
appFolder:'应用'，
启动：函数（）{
Ext.create（'Ext.panel.panel'{
renderTo:Ext.getBody（）'，
布局：“适合”，
摘要：[{
码头：“顶部”，
xtype:'工具栏'，
项目：[{
xtype:'按钮'，
文本：“按钮”
}]
}],
项目：[
{
html:'
}]
});
}
});

在这里工作：

Ext.application({
    name: 'app',
    appFolder: 'app',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody()',
            layout: 'fit',
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    text: 'Button'
                }]
            }],
            items: [
            {
                html: '<img src="resources/images/image.png">'
            }]
        });
    }
});