1. #1
    Sencha User mes-x's Avatar
    Join Date
    Mar 2010
    Posts
    27
    Vote Rating
    1
    mes-x is on a distinguished road

      0  

    Default Unanswered: SlideIn Animation

    Unanswered: SlideIn Animation


    Hi,

    i got a quite beginners question and hopefully you can help me out:

    i got two Ext.container.Containers inside a wrapping container configured with the "auto"layout.
    Code:
    +---------------------+
    |    Container A      |
    +---------------------+
    |                     |
    |    Container B      |
    |                     |
    +---------------------+
    Container A should only show itself on sertant conditions. On some event, i wanna use some kind of slideIn animation from the top, but initialy it should be invisible.
    It was easy to do in ExtJS 3 but how to do that in ExtJS 4.1?
    The challenge is not the sliding in (i do it with ...
    Code:
    container.getEl().slideIn("t")
    ) but to have it initially hidden when the application starts.

    I tried to configure Container A with "hidden:true" and use the slideIn, but then nothing happens. It stays hidden. When i call the show() method before sliding it in, then it is shortly visible, disappearing again and then its sliding in.

    What is best practice here?
    (I would be also awesome if i could still use the automatic height of Container A (Contains some HTML text with icons and some buttons))

    Thank you very much for your help!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Answers
    666
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this is what you are looking for:

    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
    
        height: 250,
        width: 400,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        title: 'main Panel',
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',
                        title: 'My Panel 2',
                        itemId: 'panel1',
                        hidden: true,
                        flex: 1
                    },
                    {
                        xtype: 'panel',
                        title: 'My Panel 2',
                        itemId: 'panel2',
                        flex: 2
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    
    });
    
    var panel = Ext.create('MyApp.view.MyPanel', {
        renderTo: Ext.getBody()
    });
    
    pnl1 = panel.down('#panel1');
    pnl1.setVisible(true);
    pnl1.el.slideIn();
    Scott.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    16
    Answers
    1
    Vote Rating
    0
    corneadoug is on a distinguished road

      0  

    Default


    No it's not working, same problem (showing full component before starting effect)

    Real problem is that when we do a SlideIn, we do it on the DomElement and the visibility is changed there.
    When we do a SlideIn, it doesn't change our component hidden value.

    The hidden should be placed on the DomElement and not the component to see the slideIn working well.
    Any way to do that in config options of the Ext.Create?

    I even tried a el.slideOut('t', {duration: 1}); and then setVisible(true); el.slideIn(); but we still see the full component before slideIn

  4. #4
    Sencha User mes-x's Avatar
    Join Date
    Mar 2010
    Posts
    27
    Vote Rating
    1
    mes-x is on a distinguished road

      0  

    Default Same problem

    Same problem


    Same problem still here

    It seems that ExtJS does not support animations very well...

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Location
    India
    Posts
    18
    Vote Rating
    0
    extjs1111_user is on a distinguished road

      0  

    Default


    I too faced the similar problem. got it working through Jquery animation.
    Code Snippet
    Code:
                              var panel = Ext.getCmp('test'); //initially hidden
                                $( "#test" ).slideDown(2000);  //Jquery function
                                panel.show();

  6. #6
    Ext JS Premium Member
    Join Date
    Oct 2009
    Posts
    60
    Vote Rating
    1
    hhangus is on a distinguished road

      0  

    Default


    I've run into this same exact situation. I want to slide open a panel that is initially unrendered/unshown but if I show it before calling the anim (for example, running the anim in the "show" event) it shows up without the anim followed by the anim. I.e. for a fadeIn, the panel will initially show fully, then blink out to hidden, then fadeIn again.

    I ran into soooo many problems trying to make this work, and could not find an online resource that spelled out how to do this properly. I read several resources that suggested the same thing scottmartin did, but this does not work as expected. When the panel is set visible, it immediately becomes visible, and then the animation hides it again in order to do the fadeIn.

    It seems like everyone assumes the panel will already be showing, which is odd to me since the use of fadeIn should logically be able to be used before a fadeOut just as easily as after. In any case, I had a very hard time getting this to work (i.e. about 8 hrs of bashing my head on the keyboard) as it isn't made obvious from the documentation or any online resources I could find. Or maybe I'm just slow in the head lol.

    I worked around the problem by showing the panel offscreen, then in the show event I move the panel on screen and do the fadeIn. This effectively hides the first showing before the anim runs. To do the hiding, I call the fadeOut with a callback in which I hide the panel so that the panel component is internally set as hidden. Without doing a panel.hide() the next show event won't fire because the panel still thinks it is showing.

    IMO, there should be fadeIn/Out functions on the panel as this is pretty common in my experience. The panel version would do the fadeIn/Out on the element but also handle the show/hide of the panel component so everything works as expected.

    Here is an example:

    Code:
    Ext.define('HomeApp.view.MenuPanel',{
            extend:'Ext.panel.Panel',
            width:300,
            left:-1000,top:0,
            items:[...],
            listeners:{
                    show:function(me){
                            me.setPosition(0,0);
                            me.getEl().fadeIn({
                                    endOpacity: 1,
                                    easing: 'easeOut',
                                    duration: 100
                            });
                    }
            }
            ,hideMe:function(me){
                    me.getEl().fadeOut({
                            endOpacity:0,
                            easing:'easeIn',
                            duration:100,
                            callback:function(){
                                    me.setPosition(-1000,0);
                                    me.hide();//required to allow .show() to be called again.
                            }
                    });
            }
    });
    var myPanel = Ext.create('HomeApp.view.MenuPanel');
    myPanel.show();
    ...do stuff...
    myPanel.hideMe();