是否可以在extjs面板中顯示div的內容？

我有一些預先存在的js代碼，通過DOM操縱div。我有一個Ext.container.Viewport與邊界佈局。我想在視口中心區域的面板內顯示div的內容。是否可以在extjs面板中顯示div的內容？

HTML

<div id="contents"></div>

EXTJS

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    items: [{ 
    region: 'north', 
    ... 
    }, { 
    region: 'center', 
    items: [{   
     // #contents; 
    }] 
    ]} 
});

來源

2011-10-10 wulfgarpro

您可能感興趣的contentEl配置選項。從文檔：

指定現有的HTML元素或現有HTML元素的id用作此組件的內容。

這個配置選項用於採取現有的HTML元素，並將其放置在一個新組件的佈局元件（它簡單地移動後的組件呈現爲內容，以使用指定的DOM元素。

。

有文檔中提供了一些說明，但它聽起來像是你在尋找什麼

來源

2011-10-10 03:38:43 NT3RP

看起來工作;這聽起來不太好：_「指定的HTML元素不會參與組件可能使用的任何佈局方案，它只是HTML，佈局對子項進行操作。」但是，從我有限的測試中，它看起來像像'border'佈局正在生效。 – wulfgarpro

@ wulfgar.pro，是的，那個音符是說它不會被父母大小，它將採取整個寬度，但不是高度，像普通div –

NT3RP是正確的，contentEl是你所需要的下面是一個代碼片段：

Ext.create('Ext.container.Viewport', { 
      layout : { 
       type : 'border' 
      }, 
      items : [ { 
       region : 'north', 
       contentEl : 'header', //content read from html div#header 
       id : 'mainHeader' 
      },

順便說一下，視口中任何reagion的默認xtype都是一個Panel - 所以你不必創建一個新的Panel。

來源

2011-10-10 04:29:06 dbrin

感謝xtype提示。 – wulfgarpro

另一種選擇是使用Ext.panel.Panel的html屬性。

這與API中描述的contentEl有一些細微的差異，但執行類似的任務。

來源

2011-10-10 10:40:59 dougajmcdonald

我試着將DOM組件分配給html配置 - 這沒有像預期的那樣工作。 – wulfgarpro

是否可以在extjs面板中顯示div的內容？

回答

相關問題