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元素在面板的render事件触发后才可用.对于childEls任何组件的配置下列出的所有元素,这都是相同的.

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

1. 如果组件是容器的子项,则在父容器呈现时将呈现该组件.例外情况是使用deferredRender配置时使用卡布局的容器,例如选项卡面板.

2. 如果某个组件不是容器的子组件,但它正在使用该组件renderTo,则它将在构造时呈现,即使它是隐藏的.

3. 如果非浮动组件正在使用该autoRender配置,则该组件将在第一次显示时呈现,例如panel.show().如果它使用两者autoRender,autoShow那么它将在施工时渲染.

4. 浮动组件(如Windows)默认为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原始内容之后.panel.body.insertHtml()在渲染之后调用将在此div之后放置新的HTML.这对你来说可能是也可能不是问题,但我想我还是会提到它.