Sencha Touch 2 - добавление анимированной панели в HBox

Question

У меня есть контейнер (это макет HBox), и я хочу динамически вставлять панель слева от него (панель должна использовать не всю ширину экрана, а, например, 1/3).

Я не могу заставить его работать.

Вот что я попробовал:

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

Это моя панель навигации, которая должна быть вставлена ​​в контейнер:

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

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

И это метод, с помощью которого я пытаюсь добавить его:

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

... но оказалось, что он появляется, но не анимируется и не использует flex.

Любая помощь?

С наилучшими пожеланиями,

Мартин

Answer 1

Благодаря TDeBailleul, он работает именно так, но не совсем то, что я хочу;).

Я хотел, чтобы строка заголовка была анимированной и прокручивалась.

Боковая панель навигации от wnielson сделала это для меня:).

Answer 2

Here's a way of doing it:

http://www.senchafiddle.com/

Надеюсь, это помогло