Ext JS 3.4 lazy rendering accordions - force render of panels

Question

I upgraded a large app from v2 to v3.4

I have an accordion with n > 1 panels. By default the first one is expanded and all others are not. As opposed to Ext JS 2 now with Ext 3.4 the panels aren't rendered until they are expanded first. This causes multiple issues, because some code paths require the elements to be inside the DOM already.

deferredRender doesn't have any effect on accordions, it's just for tabs.

What I tried: Iterating over all items and calling setActiveItem or setActive but this only causes the very last panel to be actually rendered, all other are still not inside the DOM (I suppose activating an element is async, even though animate is false).

How can I tell the accordion to render all panels, even though they are collapse at first?

Answer 1

AFAIK all components in panel with accordion layout are rendered immediately. Example: http://jsfiddle.net/P5Gen/3/

Notice that child components are rendered after afterrender event is fired on container. Actual rendering of children is made by layout, so the markup is available after afterlayout event is fired.

To force layout (and also to force children to render) you can call container.doLayout(false, true).

If you need to invoke doLayout on each container with accordion layout, you can use ComponentMgr to do that. Example:

Ext.ComponentMgr.all.on('add', function(index, component){
    if (!(component instanceof Ext.Container)) {
        return;
    }
    if (component.layout !== 'accordion' && !(component.layout instanceof Ext.layout.AccordionLayout)) {
        return;
    }

    component.on('afterrender', function(sender) {
        // do layout or something else
        sender.doLayout(false, true);
    });
});