ExtJS - Window animation from right to left

[diegovictorbr]

I am using Ext JS classic 6.2 and have created the animation below:
bandicam20190112162945426.gif

What i want to do now is make the window appear growing from right to left. Is it possible?
My code:
listeners:{
afterrender:'afterrender',
close:()=> MCLM.DrawHelper.finish(),
show:(win)=>{
var painelEsquerdo =Ext.getCmp('painelesquerdo');
var painelCentral =Ext.getCmp('painelCentral');
var drawBtn =Ext.getCmp('drawBtn');

win.setMinWidth(0);
win.setX(painelEsquerdo.getWidth()+ painelCentral.getWidth()- win.getWidth());
win.setY(drawBtn.getY());
win.setMinHeight(drawBtn.getHeight());
win.setHeight(drawBtn.getHeight());

var oldSize = win.getWidth();
win.setWidth(0);

win.animate({
duration:300,
to:{width: oldSize}
});
}
}

[Forum_Adm]

Hi there- I have shared this with the support team to see if they can provide some help in accomplishing this. They will get back with you as soon as possible. Thanks for your patience!

Michele

[rakumar]

Hello Diego,

Please find the fiddle below which should help you with the issue.

https://fiddle.sencha.com/#view/editor&fiddle/2rb5

Regards,
Kumar
Sencha Support.

[evant]

growing from right to left

Did you look at the sample image? How would your fiddle help at all?

[diegovictorbr]

Thanks for the help. Looking at the Ext.fx.Anim docs and tweaking the example code I was able to implement the right-to-left grow with this animation.

   onShow: function (component) {
        var leftPanel = Ext.getCmp('painelesquerdo');
        var centralPanel = Ext.getCmp('painelCentral');
        var drawBtn = Ext.getCmp('drawBtn');
        var oldWidth = component.getWidth();


        // Expansion effect starting from zero width
        component.setMinWidth(0);


        // For some reason, the window appears one time before the animation at X position.
        // Therefore, i set width to zero and x outside the viewport with -9999
        component.setWidth(0);
        component.setX(-9999);


        // Aligns the window height with the button height that is docked in the right menu
        component.setMinHeight(drawBtn.getHeight());
        component.setHeight(drawBtn.getHeight());
        component.setY(drawBtn.getY());


       // In 150 milliseconds, decreases X value to the left and increases width value to the right
        component.animate({
            duration: 150,
            from: {
                width: 0,
                x: leftPanel.getWidth() + centralPanel.getWidth()
            },
            to: {
                width: oldWidth,
                x: leftPanel.getWidth() + centralPanel.getWidth() - oldWidth
            }
        });
    }

Pretty neat!