ExtJS面板追加html

我有一個使用此配置對象創建的extjs4面板。ExtJS面板追加html

{ 
    title : 'Messages', 
    region : 'north', 
    height : 200, 
    minSize : 75, 
    maxSize : 250, 
    cmargins : '0 0 5 0', 
    html : '<i>Chat started on ' + Ext.Date.format(dt, EI.datePattern) + '</i>' 
}

現在我想追加更多的HTML。例如，我要追加

<p><span class="user">me:</span><span class="how are you?"></span></p>

有時候我可以追加使用

thePanel.body.insertHtml("beforeEnd", chatHtml);

但我看到有時.body未設置！所以我不能執行上面的代碼。什麼是正確的方法來做到這一點？

來源

2012-08-24 Shiplu Mokaddim

panel.body在渲染事件觸發前不可用。你什麼時候嘗試調用insertHtml？ – Eric

@EricCook就是你。我通過在容器窗口中添加一個.show（）來修復它。你能告訴我如何手動渲染面板或容器窗口？ –

我發佈了一個更完整的解釋作爲答案。希望能夠涵蓋你需要的東西，但如果我錯過了一些東西，請告訴我，以便我可以縮小它的範圍。 – Eric

面板的主體元素是不可用，直到面板的渲染事件已解僱了。對於任何組件的childEls配置下列出的所有元素，這都是相同的。

元素可以有幾種不同的呈現方式。這不是一個全面的列表。

如果某個組件是某個容器的子項，則該組件將在父容器呈現時呈現。使用deferredRender配置時，例外是使用卡片佈局的容器，如選項卡面板。
如果一個組件不容器的孩子，但它使用的是renderTo配置，將在建設呈現，即使它是隱藏的。
如果非浮動組件使用autoRender配置，則該組件將在第一次顯示時呈現，例如panel.show()。如果它同時使用autoRender和autoShow，那麼它將在施工時呈現。
浮動組件如Windows默認爲autoShow: false和autoRender: true，因此在調用win.show()之前它們不會呈現。如果您將autoShow設置爲true，則會在創建時渲染。
使用renderTo配置的浮動組件將在創建時呈現並保持隱藏狀態，除非也使用上述的autoShow。

聽起來像你有一個面板是一個窗口的孩子，是否正確？要讓該面板立即呈現但保持隱藏狀態，請在父窗口上設置renderTo: Ext.getBody()。

或者，也仍可以訪問panel.html屬性面板呈現之前，以及示出了窗口時的任何更改將被反射。所以，如果你需要訪問內部內容，但你無法保證面板已經呈現，你可以做這樣的事情：

if (panel.body) { 
    panel.body.insertHtml("beforeEnd", chatHtml); 
} else { 
    panel.html += chatHtml; 
}

最後一兩件事。如果您設置面板的html配置然後進行渲染，那麼在原始內容之後會有一個額外的div，名爲clearEl。渲染後調用panel.body.insertHtml()將在此div後放置新的HTML。這對你來說可能會或可能不會成爲問題，但我想我會提及它。

來源

2012-08-24 22:17:08 Eric

* extra div *元素真的很有用。 –

嘗試使用thePanel.getTargetEl（）

從來源：

getTargetEl: function() { 
    var me = this; 
    return me.body || me.protoBody || me.frameBody || me.el; 
}

來源

2012-08-24 18:28:54

ExtJS面板追加html

回答

相關問題