Sencha Touch 2 - 将面板动画添加到HBox

时间:2012-11-16 09:03:50

标签: sencha-touch-2 hbox

我有一个Container(布局是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

这是我的NavigationPanel,应该滑入容器中:

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。

任何帮助?

最好的问候,

马丁

2 个答案:

答案 0 :(得分:1)

这是一种方法:

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

希望这有帮助

答案 1 :(得分:0)

感谢TDeBailleul,它可以这样工作,但不是我想要的确实;)。

我希望标题栏能够动画并滚动。

wnielson的navigation sidebar为我做了这件事:)。