Results 1 to 10 of 10

Thread: [Modern] Neither animate nor updateLayout works as expected

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    24

    Default [Modern] Neither animate nor updateLayout works as expected

    Hello,
    I tried to play around with the admin dashboard: https://examples.sencha.com/extjs/6....min-dashboard/

    My goal is to use a pure modern app for desktop/mobile which is why I tried to rebuild the menu. However, I noticed several differences which appear to be pretty core to me.
    Imagine I have a toolbar with 1 panel with a text and 1 button. Upon button click I want to shrink the panel to a certain size.
    This works perfectly on classic toolkit either by setting the width and updating the layout or by using the animation function on the panel.

    However, neither updateLayout nor animate does anything when switching to modern.

    1) updateLayout classic (works):
    https://fiddle.sencha.com/#view/editor&fiddle/2rtd

    2) updateLayout modern (does nothing)
    https://fiddle.sencha.com/#view/editor&fiddle/2rte

    Now if you comment out:

    Code:
                
    refs.test.width = 10;
    refs.test.updateLayout();
    and comment in the animation instead:
    Code:
    refs.test.animate({dynamic: true, duration: 500, to: {width: 10}});
    again it's working for classic but not for modern as animate is not a function.

    If I now use test.el instead of test, the animation works but is bugged (animation only works the first time but not to the correct width. Afterwards the animation is gone but it jumps to the correct width tho)

    Code:
    refs.test.el.animate({dynamic: true, duration: 500, to: {width: 10}});
    Am I missing anything or why is the behaviour so different between those kits. Those seem to be pretty straight forward things. Any solution to this? I don't want to go universal but having a modern app for everything.

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

    Default

    Thank you so much for your post. I apologize for the delay. I have shared this with the support staff to look into at their earliest convenience. Your patience is greatly appreciated!

    Thanks again,

    Michele


  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    Code:
    Ext.define("Fiddle.view.MainController", {
        extend: "Ext.app.ViewController",
        alias: "controller.fiddle-main",
        config: {
            collapsed: false
        },
        onCl: function() {
            const collapsed = this.getCollapsed();
            this.lookup('test').setWidth(collapsed ? 300 : 10);
            this.setCollapsed(!collapsed)
    
        }
    });
    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.

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

    Default

    Hello,

    Thank you for contacting Sencha Support!

    I would recommend you to try to use setWidth function in the below way to resolve your issue.
    refs.test.setWidth(100)

    Regards,
    Kumar
    Sencha Support.

  5. #5
    Sencha User
    Join Date
    May 2017
    Posts
    24

    Default

    Quote Originally Posted by rakumar View Post
    Hello,

    Thank you for contacting Sencha Support!

    I would recommend you to try to use setWidth function in the below way to resolve your issue.
    refs.test.setWidth(100)

    Regards,
    Kumar
    Sencha Support.
    Hello,
    thanks for your response. I was already aware of the setWidth function working as expected.

    However, the 2 questions remain:
    1) Why is updateLayout working properly in classic while it's not in modern? In theory this is quite basic (modifying the config and re-rendering it).

    2) Why is animate not working in modern?
    For this I edited the fiddle again:
    https://fiddle.sencha.com/#view/editor&fiddle/2rte

    I commented out the desired behaviour which works in classic. However, in modern the whole animate seems to be bugged.
    2a) Why is animate not a function on the refs.test object and I have to use refs.test.el?
    2b) Why is it animating to a the desired width and immediately re-rendering to a width of the size of the "Shrink Me" text and stops working afterwards?

    Thanks in advance.

  6. #6
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569

    Default

    Hello,

    Thank you for the details provided.

    I went ahead and created three seperate Jira tickets to address your issues

    EXTJS-28285 - New feature request for Animate method support for Panel like classic toolkit
    EXTJS-28286 - Bug for panel updateLayout method is not working like classic toolkit
    EXTJS-28287 - Bug for Animation is not working properly

    I will be able to provide updates on these as and when there is and will keep you posted.

    Regards,
    Kumar
    Sencha Support.

  7. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    EXTJS-28286 - Bug for panel updateLayout method is not working like classic toolkit
    This shows such a fundamental misunderstanding of how Modern works.
    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.

  8. #8
    Sencha User
    Join Date
    May 2017
    Posts
    24

    Default

    Quote Originally Posted by evant View Post
    This shows such a fundamental misunderstanding of how Modern works.
    How is it supposed to work? Imagine you have to apply a config onto a view, e.g. title, width etc. changed. I assume changing those attributes and re-rendering the layout once is bettter than using the setter/getter for each config object?
    I'm not too familar with modern toolkit yet but this seems to be a basic javascript thingy which seems to be pretty straight forward to me..

  9. #9
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    updateLayout has no impact in modern, because it doesn't "layout" in the same way classic does. Classic uses a JS layout engine, which is expensive to run. Modern uses a css layout engine, so all you need to do is call the appropriate setters and let the browser figure out the rest.

    The suspend/resume/updateLayout was built for classic so you can the layout engine to go and (potentially) recalculate things. In modern, this isn't necessary.

    My previous post was not directed at you, rather at support, who you think would be aware of the above.
    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.

  10. #10
    Sencha User
    Join Date
    May 2017
    Posts
    24

    Default

    Quote Originally Posted by evant View Post
    updateLayout has no impact in modern, because it doesn't "layout" in the same way classic does. Classic uses a JS layout engine, which is expensive to run. Modern uses a css layout engine, so all you need to do is call the appropriate setters and let the browser figure out the rest.

    The suspend/resume/updateLayout was built for classic so you can the layout engine to go and (potentially) recalculate things. In modern, this isn't necessary.

    My previous post was not directed at you, rather at support, who you think would be aware of the above.
    Thanks a lot for the clarification. Makes more sense to me now and I assume "EXTJS-28286 - Bug for panel updateLayout method is not working like classic toolkit" should be closed then.

Posting Permissions

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