需要與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/