Results 1 to 5 of 5

Thread: ExtJS - Window animation from right to left

  1. #1
    Sencha User
    Join Date
    Dec 2017
    Posts
    4
    Answers
    1

    Default Answered: ExtJS - Window animation from right to left

    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}
    });
    }
    }

  2. 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.


    Code:
       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!

  3. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    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

  4. #3
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569
    Answers
    7

    Default

    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.

  5. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

    growing from right to left

    Did you look at the sample image? How would your fiddle help at all?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #5
    Sencha User
    Join Date
    Dec 2017
    Posts
    4
    Answers
    1

    Default

    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.


    Code:
       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!

Similar Threads

  1. ExtJS - Window animation from right to left
    By diegovictorbr in forum Ext JS 6.x Q&A
    Replies: 5
    Last Post: 5 Mar 2019, 12:46 PM
  2. [OPEN] Chart - Horizontal Bar Series - animation left to right
    By josei in forum Ext 5: Bugs
    Replies: 5
    Last Post: 11 Dec 2014, 3:45 PM
  3. Replies: 4
    Last Post: 11 Dec 2014, 3:42 PM
  4. [OPEN] flip animation 'right' direction is same as 'left'
    By MrNickBarker in forum Sencha Touch 2.x: Bugs
    Replies: 1
    Last Post: 28 May 2013, 5:24 AM
  5. How to set Animation to 'from left to right' when click myback button?
    By aaronchen2k in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 8 Apr 2012, 6:36 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •