Sencha Touch 2 - adding Panel animated to an HBox

Question

I've got an Container (which layout is HBox) and want to dynamically slide-in a panel on the left side of it (the panel shall not use the full screen width, but e.g. 1/3 of it).

I can't get it to work.

Here is what I tried:

Ext.define('MegatheriumProject.view.MainContainer', {
    extend: 'Ext.Container',
    alias: 'widget.maincontainerview',
    requires: ['Ext.Container', 'Ext.TitleBar'],


    config: {
            layout: {
                    type: 'hbox',
                    animation: {
                            type: 'slide', 
                            direction: 'right'
                    }
            },
            items: [
                    {
                            flex: 3,
                            xtype: 'titlebar',
                            title: 'Megatherium',
                            docked: 'top',
                            items: [
                                    // some items
                            ]
                    }
            ],
            // some other configuration, listeners aso

This is my NavigationPanel that shall be slided into the container:

Ext.define('MegatheriumProject.view.NavigationPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.navigationpanelview',
    requires: ['Ext.form.Panel'],

    config: {
        flex: 1,
        // some other config

And this is the method with which I try to add it:

showNavigation: function() {
    this.getMainContainerView().add(this.getNavigationPanelView());
},

... but it turned out that it appears but doesn't get animated and doesn't use flex.

Any help?

Best greetings,

Martin

Answer 1

Thanks to TDeBailleul, it works that way but does not the exact thing that I want ;).

I wanted the title bar to get animated and scrolled away, too.

The navigation sidebar by wnielson did it for me :).

Answer 2

Here's a way of doing it :

http://www.senchafiddle.com/#Qh35F

Hope this helped