Нужен пример приложения EXTJS4 с dockedItems

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/