javascript ExtJS 面板附加 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12113744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS panel append html
提问by Shiplu Mokaddim
I have an extjs4 panel created using this config object.
我有一个使用这个配置对象创建的 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>'
}
Now I want to append more html on it. For example I want to append
现在我想在上面附加更多的 html。例如我想附加
<p><span class="user">me:</span><span class="how are you?"></span></p>
Sometimes I could append using
有时我可以附加使用
thePanel.body.insertHtml("beforeEnd", chatHtml);
But I see sometimes .bodyis not set!! So I can not execute the above code. What is the proper way to do it?
但是我看有时候.body是不设置的！！所以我无法执行上面的代码。什么是正确的方法呢？
回答by Eric
The body element of a panel isn't available until after the panel's render event has fired. This is the same for all elements that are listed under the childElsconfig of any component.
面板的 body 元素在面板的渲染事件触发后才可用。这对于在childEls任何组件的配置下列出的所有元素都是相同的。
There are a few different ways an element can be rendered. This isn't a comprehensive list.
有几种不同的方式可以呈现元素。这不是一个全面的清单。
If a component is a child item of a container, then the component will be rendered when the parent container renders. The exception to this is containers using card layout, such as a tab panel, when using the
deferredRenderconfig.If a component is nota child of a container, but it is using the
renderToconfig, it will be rendered upon construction, even if it is hidden.If a non-floating component is using the
autoRenderconfig, that component will render the first time it is shown, such as withpanel.show(). If it is using bothautoRenderandautoShowthen it will be rendered upon construction.Floating components such as windows default to
autoShow: falseandautoRender: true, so they will not render until you callwin.show(). If you setautoShowto true, it will render on creation.Floating components using the
renderToconfig will render on creation and stay hidden, unless also usingautoShowas mentioned above.
如果组件是容器的子项，则组件将在父容器渲染时渲染。使用
deferredRender配置时使用卡片布局的容器（例如选项卡面板）是一个例外。如果一个组件不是容器的子组件，但它正在使用
renderTo配置，它将在构建时呈现，即使它是隐藏的。如果非浮动组件正在使用
autoRender配置，则该组件将在第一次显示时呈现，例如使用panel.show(). 如果它同时使用两者autoRender，autoShow那么它将在构建时呈现。浮动组件（例如 windows）默认为
autoShow: false和autoRender: true，因此在您调用 之前它们不会呈现win.show()。如果设置autoShow为 true，它将在创建时呈现。使用
renderTo配置的浮动组件将在创建时呈现并保持隐藏，除非autoShow如上所述使用。
It sounds like you have a panel that is a child of a window, correct? To get that panel to render immediately but stay hidden, set renderTo: Ext.getBody()on the parent window.
听起来您有一个面板是窗口的子级，对吗？要使该面板立即呈现但保持隐藏，请renderTo: Ext.getBody()在父窗口上设置。
Alternatively, you can still access the panel.htmlproperty before the panel is rendered, and any changes will be reflected when the window is shown. So if you need to access the inner content but you can't guarantee the panel has been rendered, you might do something like this:
或者，您仍然可以在panel.html呈现面板之前访问该属性，并且在显示窗口时将反映任何更改。因此，如果您需要访问内部内容但不能保证面板已呈现，则可以执行以下操作：
if (panel.body) {
panel.body.insertHtml("beforeEnd", chatHtml);
} else {
panel.html += chatHtml;
}
One last thing. If you set the htmlconfig of a panel then render it, there will be an extra div called the clearElafter your original content. Calling panel.body.insertHtml()after render will place the new HTML after this div. This may or may not be a problem for you, but I thought I'd mention it anyway.
最后一件事。如果你设置了html一个面板的配置然后渲染它，clearEl在你的原始内容之后会有一个额外的 div 。panel.body.insertHtml()在 render 之后调用将把新的 HTML 放在这个 div 之后。这对您来说可能是也可能不是问题，但我想无论如何我都会提到它。
回答by Johan Haest
Try using thePanel.getTargetEl()
尝试使用 thePanel.getTargetEl()
From the source:
从来源：
getTargetEl: function() {
var me = this;
return me.body || me.protoBody || me.frameBody || me.el;
}
