Sliding Side Menu

[digeridoopoo]

There is a similar example in the Sencha Touch cookbook....

:-)

[tthai]

Pretty awesome! FYI, it doesn't work on android 2.3 when I tried it. Works great on iphone 5.

[selina88k]

this is not working with sencha touch beta3.. anyone know what is the problem?

[wnielson]

Yeah, it broke with the beta builds. I'm working on updating it to work with beta 3.

[hotrod]

Awesome wnielson! Please poste when you get it working in Beta 3, i'm trying but i don't understand the framework enough yet to know how to fix it. I also would like it to behave more like the FB app and instead of using a drag motion, just have a button that is pressed to open/close it. Any pointers on how to modify it to do that would be great, thanks!

[wnielson]

Adding a button would be pretty easy. The reason that I didn't do it by default is because I didn't want to force the container to require the use of a titlebar. Therefore, by default the sliding is controlled by the drag event (actually, in the FB iPad app you can drag the container to the right without having to tap the button as well).

Anyway, for adding a button that opens/closes the menu, you'd want to configure it to have a toolbar; something like this should work in the config for your SlideNavigationPanel instance (untested):

Ext.create('app.view.SlideNavigationPanel', {
    fullscreen: true,
    list: {
        width: 250
    },
    defaults: {
        style: 'background: #fff',
        xtype: 'container'
    },
    
    // This is the important bit
    container : {
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            items: [{
                xtype: 'button',
                text: 'open', // Or use an iconCls config instead
                handler: function(button, e, eOpts) {
                    var slidepanel = button.up('slidenavigationview');
                    if (!slidepanel.isClosed()) {
                        slidepanel.closeContainer();
                        button.setText('open');
                    } else {
                        slidepanel.openContainer();
                        button.setText('close');
                    }
                }
            }]
        }]
    },
    
    items: [{
        title: 'Item 1',
        group: 'Group 1',
        items: [{
            xtype: 'panel',
            html: '<h1>Here is Item 1</h1>'
        }]
    }]
});

You can see here that I've made configuration of the container user-customizable, thus you shouldn't have to modify the source code of the SlideNavigationPanel.

[hiroprotagonist]

Wnielson,
Really a nice One and exactly what i was searching for.
I did make it running with 2.0 pr4 (some Things have obviously changed, there is no Index property in the item of the list, subitems are not taken over but the essential problem is that the Drag Event is not preventable anymore. That does mean that the list is shown on any drag operation inside of the container. Any idea how to fix that?

If You like me to, i can send over the changed i did.

[wnielson]

Thanks hiroprotagonist. I've updated the component to work with beta 3. It still has a few bugs I'm trying to iron out, one of which is the lack of ability to cancel the drag event (but I think I have an idea for a work around).

[hotrod]

Thanks for making progress on this guys! The inability to cancel the drag seems like something that either can be done differently now in b3 or might be something to bring to the developers attention to fix for the next release?

[wnielson]

I've just updated the code to fix the drag behavior. Turns out the method for preventing an action has changed in the beta--the code now behaves like before.