Question

我有一个使用此配置对象创建的extjs4面板。

{ 
    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没有设置!!所以我无法执行上面的代码。这样做的正确方法是什么？

Answer 1

面板的body元素在面板的render事件触发后才可用。对于任何组件的childEls配置下列出的所有元素，这都是相同的。

可以通过几种不同的方式呈现元素。这不是一份全面的清单。

如果组件是容器的子项，则在父容器呈现时将呈现该组件。例外情况是使用卡片布局的容器，例如选项卡面板，使用deferredRender配置时。
如果组件不是容器的子项，但它正在使用renderTo配置，则它将在构造时呈现，即使它是隐藏的。 / p>
如果非浮动组件正在使用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配置然后呈现它，则会在原始内容之后添加一个名为clearEl的额外div。渲染后调用panel.body.insertHtml()会将新HTML放在此div之后。这对你来说可能是也可能不是问题，但我想我还是会提到它。

Answer 2

尝试使用thePanel.getTargetEl（）

来自消息来源：

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

ExtJS面板追加html

2 个答案: