ExtJS: Disable accordion animation

Question

I've created accordion like this:

layout:'accordion',
layoutConfig:{
            animate:true
}

then i add elements by add() method, then re-render it with doLayout() and set the activeItem:

navigation_panel.getComponent(1).expand(false);

i call expand() method with false parameter, but it still animates the transition, so it takes setting from main layout and ignore that i sent to expand(). How to solve this problem?

Answer 1

Two things happen when you expand an item in an according panel: 1. The old active item is collapsed 2. The new active item is expanded

The collapsing of the old active item is handled by the accordion layout and occurs during the "beforeexpand" event. Looking at the source code, I see that the accordion layout calls var ai = this.activeItem; ai.collapse(this.animate)

So, the animation of the collapse of the old active item is completely determined by the "animate" property of the accordion layout. The animation flag you pass in is ignored for these purposes. I'm guessing that if you look closely, you'll see your collapse is animated while the expand is not.

Because the animate flag is passed through explicitly, I don't see any standard, supported way to override this behavior for a single operation.

In 3.0+, you may call the documented method getLayout() before or after render to get a reference a Container's layout object. You could simply set the layout object's animate property to false while manipulating the panel, then set it back when your done. This is not documented to work but probably will based on the source.