Question

以下应用在某些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({
    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">'
            }]
        });
    }
});

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

Answer 1

dockedItem 是Ext.panel.AbstractPanel（和子类）的一项功能。例如，不支持Ext.container.Container或Ext.container.Viewport。

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

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

在这里工作JsFiddle：http://jsfiddle.net/mistaecko/bDNgB/

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

1 个答案: