1. #11
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Example

    Example


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

    :-)

  2. #12
    Sencha User
    Join Date
    Oct 2011
    Location
    Austin, TX
    Posts
    43
    Vote Rating
    0
    tthai is on a distinguished road

      0  

    Default


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

  3. #13
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    selina88k is on a distinguished road

      0  

    Default


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

  4. #14
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


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

  5. #15
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    hotrod is on a distinguished road

      0  

    Default


    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!

  6. #16
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default Adding an open/close button

    Adding an open/close button


    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):

    Code:
    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.

  7. #17
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    48
    Vote Rating
    1
    hiroprotagonist is on a distinguished road

      0  

    Default


    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.

  8. #18
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


    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).

  9. #19
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    hotrod is on a distinguished road

      0  

    Default


    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?

  10. #20
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


    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.