0

I am trying to change flex of panel through animate().

I have three panels in hbox layout and each panel uses flex to dynamically consume space.

I am able to change height of the panel through animate but I am not able to change flex.

xtype: 'button',

id:'btn',
text: '>>',

handler : function() {
    var tptp = Ext.getCmp('Third_panel');

    //tptp.hide(500000000);

    tptp.animate({  

        dynamic :true,
        duration:10000,
        delay:25,
        easing:'elasticIn',
        type:'popOut',
    //from:
    //{
    //flex:2
    //},
    to: {
        height: (tptp.getHeight() == 500) ? 0 : 500
        //flex:1
    }                                                                       
});
forgivenson
  • 4,394
  • 2
  • 19
  • 28
Wadhawan994
  • 49
  • 1
  • 8

1 Answers1

0

No, the animate function does not support animating the flex.

There are still ways around this however.

You can figure out the width and x position of the containers with the desired flex and animate the width and x position using the animate function. This however will not change the content inside the panels you are animating, so this will not work well if the content isn't already fixed.

You can multiply the flex of all the panels by 100 (or any other large number) and use a setInterval to set the flex periodically until it reaches the destination flex by setting the flex property on the animating element and then calling an updateLayout() on the parent element. This however can be very slow since the layout is being updated every frame.

user2704238
  • 495
  • 4
  • 7