javascript - ExtJS 面板追加 html

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 元素在面板的渲染事件触发后才可用。这对于在任何组件的 childEls 配置下列出的所有元素都是一样的。

有几种不同的方式可以渲染一个元素。这不是一个完整的列表。

1. 如果组件是容器的子项，则组件将在父容器呈现时呈现。使用 deferredRender 配置时使用卡片布局(例如选项卡面板)的容器除外。

2. 如果组件不是容器的子组件，但它正在使用 renderTo 配置，它将在构建时呈现，即使它是隐藏。

3. 如果非 float 组件使用 autoRender 配置，该组件将在第一次显示时呈现，例如使用 panel.show()。如果它同时使用 autoRender 和 autoShow 那么它将在构建时呈现。

4. 窗口等 float 组件默认为 autoShow: false 和 autoRender: true，因此在您调用 win.show( )。如果您将 autoShow 设置为 true，它将在创建时呈现。

5. 使用 renderTo 配置的 float 组件将在创建时呈现并保持隐藏状态，除非还如上所述使用 autoShow。

听起来您有一个面板是窗口的子项，对吗？要使该面板立即呈现但保持隐藏状态，请在父窗口上设置 renderTo: Ext.getBody()。

或者，您仍然可以在面板呈现之前访问 panel.html 属性，任何更改都会在显示窗口时反射(reflect)出来。因此，如果您需要访问内部内容但不能保证面板已呈现，您可能会这样做:

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

最后一件事。如果您设置面板的 html 配置然后渲染它，在您的原始内容之后会有一个名为 clearEl 的额外 div。在呈现之后调用 panel.body.insertHtml() 会将新的 HTML 放置在此 div 之后。这对您来说可能是问题，也可能不是问题，但我想我还是要提一下。