ExtJS panel append html

ExtJS panel append html

本文关键字：html append panel ExtJS      更新时间：2023-09-26

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

只有在面板的渲染事件启动后，面板的主体元素才可用。这对于任何组件的childEls配置下列出的所有元素都是一样的。

元素有几种不同的渲染方式。这不是一个全面的列表。

  1. 如果组件是容器的子项，则在父容器渲染时将渲染该组件。使用deferredRender配置时，使用卡布局（如选项卡面板）的容器除外。

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

  3. 如果非浮动组件使用autoRender配置，则该组件将在第一次显示时进行渲染，例如使用panel.show()。如果它同时使用autoRender和autoShow，那么它将在构建时进行渲染。

  4. 浮动组件（如窗口）默认为autoShow: false和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。在render之后调用panel.body.insertHtml()会将新的HTML放在这个div之后。这对你来说可能是个问题，也可能不是个问题，但我想我无论如何都会提到它。

尝试使用Panel.getTargetEl（）

来源：

getTargetEl: function() {
    var me = this;
    return me.body || me.protoBody || me.frameBody || me.el;
}
相关文章：