Sliding Side Menu

[wnielson]

Hi ,
This https://github.com/wnielson/sencha-SlideNavigation example is perfectly work in android 3.2 but not work in 2.3 and 4.0.

Any help or any additional setting in android 2.3 and 4.0.


Thanks
Mayank

Mayank,

You probably need to play around with the CSS values (check the z-index values in particular). If you can find settings that work for all three of those versions of Android, let me know.

[Halesway]

Hi,

This is a great component and is exactly what I need for a project.

I have the latest versions of Sencha Touch 2 and your code from github. Everything works as expected when dragging the view to reveal the menu, but the slide event is not fired when clicking the toggle button either in the toolbar or from any of the sub page buttons.

There are no errors appearing in the log and it appears to be getting in to the 'moveContainer' function just fine, but the draggable.setOffset appears to be doing nothing!

Hope you can help,
Many thanks!

[in4p]

Hi Halesway,

You can manually trigger the slide event on a button tap with a call to toggleContainer - I've done it in an application I'm building. But I would guess you have something wrong in how you've set it up. Maybe you should post some source code?

Hi,

This is a great component and is exactly what I need for a project.

I have the latest versions of Sencha Touch 2 and your code from github. Everything works as expected when dragging the view to reveal the menu, but the slide event is not fired when clicking the toggle button either in the toolbar or from any of the sub page buttons.

There are no errors appearing in the log and it appears to be getting in to the 'moveContainer' function just fine, but the draggable.setOffset appears to be doing nothing!

Hope you can help,
Many thanks!

[Halesway]

Hi Halesway,

You can manually trigger the slide event on a button tap with a call to toggleContainer - I've done it in an application I'm building. But I would guess you have something wrong in how you've set it up. Maybe you should post some source code?

Well toggleContainer ultimately just fires moveContainer in the end anyways, so I'm sure the problem must lie there.

Even with a really stripped down version with just the absolute basics, it still doesnt work...

app.js

Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('Ext.ux', 'ux');

Ext.application({
    name: 'ProjectX',
    views: ['Main'],
    tabletStartupScreen: 'resources/images/tablet_startup.png',
    phoneStartupScreen: 'resources/images/phone_startup.png',
     
    launch: function() {
       
        Ext.Viewport.add(Ext.create('ProjectX.view.Main'));
 
    }
});

Main.js

Ext.define("ProjectX.view.Main", {
    extend: 'Ext.ux.slidenavigation.View',
    
    requires: [
        'Ext.Container',
        'Ext.MessageBox',
        'Ext.Panel',
        'Ext.Toolbar',
        'Ext.event.publisher.Dom'
    ],
    
    config: {
        fullscreen: true,

        slideSelector: 'x-toolbar',

        selectSlideDuration: 200,

        list: {
            maxDrag: 200,
            width: 200,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'light',                    
                title: {
                    title: 'Navigation',
                    centered: false,
                    width: 200,
                    left: 0
                },
            }]
            
        },
        
        defaults: {
            style: 'background: #fff',
            xtype: 'container'
        },
        
        items: [{
            title: 'Item 1',
            group: 'Group 1',

            slideButton: {
                selector: 'toolbar'
            },
            items: [{
                xtype: 'toolbar',
                title: 'Item 1',
                docked: 'top'
            },{
                xtype: 'panel',
                html: 'fgh'
            }]
        }]
    }
});

It's annoying because the example version at http://wnielson.github.com/sencha-SlideNavigation/ works great.

[Halesway]

Hi,

Well good news for me, it's fixed!

I have been playing about with the SDK Tools today and subsequently downloaded a slightly different version of ST2 from the download page (via the open source > commercial version... rather than the commercial version where you enter an email)

A dropped the slideNavigation Main.js right in and hey presto it now all works!

[West19th]

Hi all.

I love this Sliding Menu. Thanks a lot for that.
By the way ... I have done Sencha Touch native packaging for Android with an app including the Sliding Menu and everything works perfektly. I have used Sencha Touch 2.0.0 and tested on an HTC Android phone with version 2.3.3.

Now I have a question:
I would like to have my own classes for all views instead of defining everything in the Main.js view.
Based on the downloadable example of the Sliding Menu I have added

{
xtype: 'homepanel',
title: 'Home', 
group: 'Group 3'  
},

as second item in the items section of the Main.js view.

I have added a Home.js view and extended the views section in the app.js like so

views: ['Main', 'Home'],

My Home.js view looks pretty much like this

Ext.define("SlideNavigationExample.view.Home", {
    extend: 'Ext.Panel',
    xtype: 'homepanel',
    
    
    config: {
        title: 'Home',
        iconCls: 'home2',
        cls: 'home',
        
        scrollable: true,
        styleHtmlContent: true,
        
        items: [
            
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Test'
            },
        ],
        
        html: [
            'bla bla bla'
        ].join("")
    }
});

In the sliding menu the new 'Button' 'Home' is visible now.
But everytime I click on it the first view defined for Sliding Menu becomes visible.

Anybody got an idea how I can switch to my "external" views?

Thanks a lot

[primitive_type]

Yup, this is possible, you just have to get a bit tricky. Lets say you've defined your slideButton like so:

    slideButton: {
        selector: '[name="slidetoolbar"]',
          iconCls: 'list'
        },

Then, in your navigationview you need to overload the NavigationBar config:

Ext.define('MyNavigationview', {
    extends: 'Ext.navigation.View',
    config: {
        navigationBar: {
            docked: 'top',
            name: 'slidetoolbar',
            items: [{
                xtype: 'button',
                ui: 'back',
                hidden: true
            }]
        },
        // ... other config items here ...
    }
})

Hi wnielson,

Thanks for making this awesome plugin. In my navigation view, I am not able to get the slide nav menu to appear more than once. For example, I slide it out, and then press the "Back" button in my navigation view, and after that point I am no longer able to access the slide nav menu until I reload my app. Any ideas?

Thanks!

[thang_ibrahim]

IMG_1861.jpg


I'm in item1. I 've some action in controller, then i want setActiveItem() item 6. How can i do that

[coolfish]

I had a heck of a time getting this to work on OS X. Steps to get it to work:

1) Get the SDK Tools, install to somewhere, make sure any and all path variables for previous versions are gone, $SDK_TOOLS
2) Get the framework, Touch 2.0.1.1 and install to ~/sites/sdk
3) clone the git repository to ~sites/sencha-SlideNavigation
4) create a new app with sencha app create MyFoo ~/sites/myfoo (do this from the $SDK_TOOLS directory)
5) delete the sdk folder from ~sites/sencha-SlideNavigation
5a) copy the /sdk folder from your MyFoo application into the ~sites/sencha-SlideNavigation
6) Edit app.js from ~sites/sencha-SlideNavigation and remove the requires for Ext.Msg or Ext.MessageBox (whatever was in there), otherwise the 'sencha app build -e testing' (which you run from ~sites/sencha-SlideNavigation) does not work - errors out with "Using Ext.Msg without requiring Ext.MessageBox". For some reason, removing the reference to the requires makes it work.

Hopefully this helps someone else whose trying to run this example on OS X using SDK Tools beta3 and Touch 2.0.1.1

Cheers

[haruxx]

Getting this to work on win7 64bit with SDK3 beta, Touch 2.0.1.1

How are you?


questions is can I get sliding menu.
In another view using the sliding menu using DatePicker pop up menu.
Non-float side of the menu to view what changes do you do?

Ext.define('Test.view.unitMain.UnitTest01', {
    extend : 'Ext.Panel',
    requires: [
          "Ext.form.FieldSet",
         "Ext.field.DatePicker",
         "Ext.field.Number"
    ],
    xtype : 'unittest01',
    
    config : {


        layout : "fit",
        
        tab : {
            title : 'field Test',
            iconCls : 'star'
     },


        items: [
            {
                xtype: "panel",
                layout: { type: "vbox", align:"middle"},
                items: [
                    {
                        {
                            xtype:"datepickerfield",
                            name:"test_date",
                            label:"test_date",
                            value:new Date()
                        },
                        {
                            xtype: "fieldset",
                            title:"test_field", 
                            items: [
                                {xtype:"numberfield", id:"test_num", name:"test_num", label:"test_num"}
                            ]
                        }
                    }
                ]
            }
        ]    
    }
});