在一個div

Question

我試圖運行ExtJS4 Ext.application我們現有的網站模板中渲染Ext.application。我們有一個div #content，到了我想要的地方開發中的應用。如何將應用程序渲染到這個區域，而不是替換現有的html頁面？

Ext.application({ 
    name: 'HelloExt', 
    launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
     // renderTo: Ext.Element.get('#content') doesn't work 
      items: [ 
       { 
        title: 'Hello Ext', 
        html : 'Hello! Welcome to Ext JS.' 
       } 
      ] 
     }); 
    } 
}); 

Answer 1

您需要使用除Ext.container.Viewport之外的其他容器。通過definfiton Ext.container.Viewport將始終以整個瀏覽器窗口。

從技術文檔：

視口使自身到文檔正文，並自動調整大小本身到瀏覽器窗口的大小並管理窗口大小調整。可能只有一個Viewport在頁面中創建。

只需使用Ext.panel.Panel代替

Ext.application({ 
    name: 'HelloExt', 
    launch: function() { 
     Ext.create('Ext.panel.Panel', { 
      layout: 'fit', 
      renderTo: Ext.get('content') 
      items: [ 
       { 
        title: 'Hello Ext', 
        html : 'Hello! Welcome to Ext JS.' 
       } 
      ] 
     }); 
    } 
});