需要与dockedItems例如EXTJS4应用

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/