SlideIn Animation

[mes-x]

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.

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

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!

[scottmartin]

See if this is what you are looking for:

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.

[corneadoug]

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

[mes-x]

Same problem still here

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