Sliding Side Menu

[bnerd]

Hi wnielson,

Ran into another not-so-major issue.

When using a view that is a navigation view. I don't see to have a way to select the slideButton selector. Normally this is toolbar or titlebar. None of those work with the navigation view. So I tried navigationbar, navigationBar, and navigation-bar. None of those worked.

Do you know how we can include the slide button onto a navigation view?

[gkatz]

Hi;
the github rep readme file states this component was tested with android 4.0.3. was it on a real devices? or the emulator?
if on a real device, did you experience the behavior I showed in the video I posted not to long ago about the strange re-adjusting of the sliding window in close/open actions?
thanks

[s.t.a.s]

Guys, how to detect selection of the items in this view? I added two items and views for each item. I have a function for refreshing data in views. But I can't figure out how detect tap on items, 'cause this component, as I see, hasn't listeners. How to do it?

Here is my code:

Ext.define("MyApp.view.MyPanel", {    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: 400,
            width: 200,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'light',
                title: {
                    title: '',
                    centered: false,
                    width: 200,
                    left: 0
                }
            }]


        },


        groups: {
            'Customers': 1,
            'Options': 2
        },


        defaults: {
            style: 'background: #fff',
            xtype: 'container'
        },
        items:
        [
            {
                title: 'Customers',
                group: 'Customers',
                slideButton: {
                    selector: 'toolbar'
                },
                items: [
                    {
                        xtype: 'toolbar',
                        title: 'Customers',
                        docked: 'top'
                    },
                    AccountList
                ]
            },
            {
                title: 'Contacts',
                group: 'Customers',
                slideButton: {
                    selector: 'toolbar'
                },
                items: [
                    {
                        xtype: 'toolbar',
                        title: 'Contacts',
                        docked: 'top'
                    },
                    ContactList
                ]
            },
            {
                title: 'Options',
                group: 'Options',
                slideButton: {
                    selector: 'toolbar'
                },
                items: [
                    {
                        xtype: 'toolbar',
                        title: 'Options',
                        docked: 'top'
                    }, {
                        styleHtmlContent: true,
                        xtype: 'panel',
                        layout: 'card',
                        html: '<p>In Work</p>'
                    }
                ]
            }
        ]
    }
});

[s.t.a.s]

I've found a solution.
1. In config of my slidenavigation.View I defined my own select-method:

selectListener: this.onSelect

where this.onSelect is my function of update data in lists.
2. In method "onSelect" in View.js (of slidenavigation.View) I added following code:

if (Ext.isFunction(this.config.selectListener)) {
	this.config.selectListener(item);
}

Hope, it will help somebody.

[wnielson]

Hi;
the github rep readme file states this component was tested with android 4.0.3. was it on a real devices? or the emulator?
if on a real device, did you experience the behavior I showed in the video I posted not to long ago about the strange re-adjusting of the sliding window in close/open actions?
thanks

I don't have a real Android device to test on, so I could only use the emulator, and no, I didn't observe the weird behavior in the video. Unless I get a real Android device to test on, I'm afraid I won't be of much help here...

Perhaps you can do some debugging? Weinre makes it very easy (http://phonegap.github.com/weinre/). Send me a PM if you want some tips on getting started. I'd love to get Android working properly.

[wnielson]

I've found a solution.
1. In config of my slidenavigation.View I defined my own select-method:

selectListener: this.onSelect

where this.onSelect is my function of update data in lists.
2. In method "onSelect" in View.js (of slidenavigation.View) I added following code:

if (Ext.isFunction(this.config.selectListener)) {
	this.config.selectListener(item);
}

Hope, it will help somebody.

I haven't added an event for the item select, mainly because you can do it like this:

Ext.define('MyNavigation, {
    extends: 'Ext.ux.slidenavigation.View',
    config: {
        list: {
            width: 250,
            maxDrag: null,
            itemTpl: '{title}',
            grouped: true,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'light'
            }],
            // Define a custom listener
            listeners: {
                select: function(list, item) {
                    Ext.Msg.alert('Select', 'You selected an item');
                }
            }
        },
        //  ... more config here...
    }
});

Perhaps I'll add a custom event to the navigation View itself, so that you don't have to overload the list config.

[wnielson]

Hi wnielson,

Ran into another not-so-major issue.

When using a view that is a navigation view. I don't see to have a way to select the slideButton selector. Normally this is toolbar or titlebar. None of those work with the navigation view. So I tried navigationbar, navigationBar, and navigation-bar. None of those worked.

Do you know how we can include the slide button onto a navigation view?

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

[bobpardoe]

I am running the code downloaded from GitHub with v2.0.0 of Touch. Your demo works fine in the same Google browser. Running on Ubuntu.

I have taken your main.js as my class and I can display it fine and it works fine but no text ...

I can see the text in the html, for both the groups and the items, but nothing shows on screen. The click events all work too. No errors in the debug console.

I don't have a device to test on.

Any ideas ?

Thanks

BOb

[FBlack]

Hi,
I want to change the List for a Panel with buttons and Slide from up to bottom. How I can to do this?

[bnerd]

so wnielson

I'm loving this component. I have a question.. Can i listen for when the sliding view finishes it's animation and then find out if it is open or closed?

I want the menu to behave just like facebook so that if the user is navigating in a view and swipes the menu open... I can change the back button to a slide button... and then when the menu closes I can change the slide button back to a back button.

Hope that makes sense lol.