1

我有一个使用这个配置对象创建的 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是不设置！所以我不能执行上面的代码。正确的方法是什么？

4

2 回答 2

5

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

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

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

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

  3. 如果一个非浮动组件正在使用该autoRender配置，该组件将在第一次显示时呈现，例如使用panel.show(). 如果它同时使用两者autoRender，autoShow那么它将在构造时呈现。

  4. windows等浮动组件默认为autoShow: falseand autoRender: true，所以在调用之前不会渲染win.show()。如果设置autoShow为 true，它将在创建时呈现。

  5. 使用配置的浮动组件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()将把新的 HTML 放在这个 div 之后。这对你来说可能是也可能不是问题，但我想我还是会提到它。

于 2012-08-24T22:17:08.523 回答
1

尝试使用 thePanel.getTargetEl()

从来源：

getTargetEl: function() {
    var me = this;
    return me.body || me.protoBody || me.frameBody || me.el;
}
于 2012-08-24T18:28:54.753 回答