Question

I have an extjs4 panel created using this config object.

{ 
    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

<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 .body is not set!! So I can not execute the above code. What is the proper way to do it?

Answer 1

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 childEls config of any component.

There are a few different ways an element can be rendered. This isn’t a comprehensive list.

1. 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 deferredRender config.

2. If a component is not a child of a container, but it is using the renderTo config, it will be rendered upon construction, even if it is hidden.

3. If a non-floating component is using the autoRender config, that component will render the first time it is shown, such as with panel.show(). If it is using both autoRender and autoShow then it will be rendered upon construction.

4. Floating components such as windows default to autoShow: false and autoRender: true, so they will not render until you call win.show(). If you set autoShow to true, it will render on creation.

5. Floating components using the renderTo config will render on creation and stay hidden, unless also using autoShow as mentioned above.

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.

Alternatively, you can still access the panel.html property 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:

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

One last thing. If you set the html config of a panel then render it, there will be an extra div called the clearEl after 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.