Sencha Touch Slide Over菜单

Question

使用Sencha Touch：

我想创建一个幻灯片菜单。但不像facebook类型：

我想要它做的事情是滑出顶部（在标题下的容器上）和菜单下面，以便它越过它而不是将它推到右边：

我已经搜索过，并没有找到任何样本。任何人都可以推荐这样做的网站或教程。

更新 - 2014年5月24日 谢谢大家的不同建议。唯一的问题是我不希望它看起来像FB滑块。我见过那些。我希望它像我添加的第二个屏幕截图一样滑过。我能够创造它。这是我的代码：

Ext.define('Slider.view.Main', 
{
    extend: 'Ext.Container',
    xtype: 'mainPage',
    requires: 
    [
        'Ext.TitleBar',
        'Ext.form.Panel',
        'Ext.List',
        'Ext.navigation.View',
        'Ext.Component',
        'Ext.Panel'
    ],

    config: 
    {
        layout: 'fit',
        items:
        [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Slider Test',
                items:
                [
                    {
                        iconCls: 'list',
                        align: 'left',
                        handler: function()
                        {

                            var con1 = Ext.ComponentQuery.query('container > #container1')[0];
                            var draggable = Ext.ComponentQuery.query('container > #navContainer')[0];

                            if(con1.element.hasCls('out'))
                            {

                                draggable.hide({type: 'slideOut', direction: 'left', duration : 500});


                                con1.element.removeCls('out').addCls('in');
                            }
                            else
                            {
                                con1.element.removeCls('in').addCls('out');
                                draggable.show({type:'slideIn', direction:'right', duration : 500});

                            }

                        }
                    }
                ]
            },

            {
                xtype: 'container',
                layout: 'hbox',
                itemId: 'container1',
                items:
                [

                    {
                        xtype: 'container',
                        layout: 'card',
                        width: 250,
                        hidden: true,
                        itemId: 'navContainer',
                        style: 'position: absolute; top: 0; left: 0; height: 100%;z-index: 2',
                        zIndex : 1,
                        items:
                        [
                            {
                                xtype: 'list',
                                itemTpl: '{title}',
                                data:
                                [
                                    { title: 'Item 1' },
                                    { title: 'Item 2' },
                                    { title: 'Item 3' },
                                    { title: 'Item 4' },
                                    { title: 'Item 2' },
                                    { title: 'Item 3' },
                                    { title: 'Item 4' },
                                    { title: 'Item 2' },
                                    { title: 'Item 3' },
                                    { title: 'Item 4' },
                                    { title: 'Item 2' },
                                    { title: 'Item 3' },
                                    { title: 'Item 4' }                     
                                ]
                            }
                        ]
                    },


                    {
                        xtype: 'container',
                        itemId: 'mainContainer',

                        width: '100%',
                        html: 'Main content area'
                    }



                ]
            }
        ]
    }
});

Answer 1

检查此示例Slide navigation with sencha touch

Answer 2

将cover设为true。

Ext.Viewport.setMenu(this.createMenu(), {
    side: 'left',
    cover: true
});

这将使菜单滑出容器顶部。我不确定它是否在导航栏下面，但有些聪明的CSS可以解决这个问题。

Answer 3

感谢大家的提示。我能够创建我想要的并在更新

下发布代码