PDA

View Full Version : How to control accordion panel collapse speed?



lotrmj
1 Apr 2012, 6:28 AM
Hi, is there any method to control how fast/slow should accordion panel expand/collapse?
This snippet ignores the animate value:


layout: {
type: 'accordion'
animate: 100
}

chramer
1 Apr 2012, 9:04 AM
animate property for accordion layout accepts only boolean values... there are numeric values
only for vbox and hbox layouts! it looks that it's not possible to controll the collapse speed for
accordion.

vietits
1 Apr 2012, 3:46 PM
layout: {
type: 'accordion',
animate: {
duration: 10000
}
}

lotrmj
1 Apr 2012, 10:22 PM
layout: {
type: 'accordion',
animate: {
duration: 10000
}
}


Thanks, it works!! But now I see one more thing that should be fixed: content in panel dissappears too quickly oncollapse, but it appears normally onexpand. How should I fix it?
By the way, can I modify other animate properties? Is this possible? I tried that, but with no luck.

vietits
1 Apr 2012, 11:58 PM
Below is my solution for your request. Hope that will fit you well.


Ext.create('Ext.panel.Panel', {
...
layout: {
type: 'accordion',
animate: {
duration: 5000
}
},
listeners: {
render: function(comp){
var layout = comp.getLayout();
var height = null;
Ext.Function.interceptBefore(layout, 'setCollapsed', function(comp){
height = comp.getEl().getHeight();
});
Ext.Function.interceptAfter(layout, 'setCollapsed', function(comp){
comp.getEl().setHeight(height);
});
}
}
});

lotrmj
2 Apr 2012, 12:18 AM
Below is my solution for your request. Hope that will fit you well.


Ext.create('Ext.panel.Panel', {
...
layout: {
type: 'accordion',
animate: {
duration: 5000
}
},
listeners: {
render: function(comp){
var layout = comp.getLayout();
var height = null;
Ext.Function.interceptBefore(layout, 'setCollapsed', function(comp){
height = comp.getEl().getHeight();
});
Ext.Function.interceptAfter(layout, 'setCollapsed', function(comp){
comp.getEl().setHeight(height);
});
}
}
});


WOW! Thanks! That's that I needed!