Sliding Side Menu

[aeiz]

Anyone know of a way to keep the slide button at the left most position when using with a navigation view? I tried modifying the slide button add to be an insert at index 0, but that seemed to have no effect and the back button still appears first in the navigation bar.

This is my modified code:

createSlideButton: function(el, config) {        
        var me = this,
        parent = el.down(config.selector);
        if (parent) {
            return parent.insert(0, Ext.merge(me.slideButtonDefaults, config));
            //return parent.add(Ext.merge(me.slideButtonDefaults, config));
        }
        
        return false;
},

[Halesway]

Hi Halesway, Could you offer up a code snippet for dynamically updating the list from a store? I was able to achieve something like that by creating a function to loop through my store and add the object to the items array. However, I don't know where to add that function so that the items object would be rendered in the view.

Any kind of help would be greatly appreciated. Thanks!

Hi,

Sorry for the delayed response, only just seen this thread again today.

Yeah, it took a bit of trial and error and educated guessing honestly to get it working how I wanted. wneilson himself may well cringe at my solution but I wasn't 100% certain what every bit of his code did so some bits might not be applicable to the actual solution. Anyways this is how I got it working for my particular app...

For reasons I wont go in to, we were actually populating the slide menu items with just a hard coded array of new items rather than pulling new items from a store but hopefully it should still be translatable.

I've slightly renamed some attributes and simplified but this is basically the app code:

The contents of my slideMenu instance:

config: {
        id: 'exampleSlideOutMenu',
        title: 'Home',
        iconCls: 'home',
        selectSlideDuration: 200,

        list: {
            maxDrag: 300,
            width: 260,
            name: 'exampleList',
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'slideMenuUI',

                title: {
                    title: 'Example',
                    width: 200,
                    style: 'text-align: left',
                    left: 0
                },
                layout: {
                    pack: 'right'
                },
                items: [
                    {
                        xtype: 'button',
                        iconCls: 'delete',
                        iconMask: true,
                        action: 'closeMenu',
                        ui: 'slide-menu-btn'
                    }
                ]
            }]


        },


        defaults: {
            xtype: 'container'
        },


        items: defaultMenuItems


    }

Then in my controller (simplified for here), this is what gets called within a function when I click on a button on my home page that needs to load in the new items in to the slide menu list:

menu = Ext.getCmp('exampleSlideOutMenu');

menu._indexCount = 0;
menu.store.removeAll();
delete menu.config.items;
menu._cache = {};

menu.addItems(dynamicMenuItems);

menu.openContainer();

My app made things slightly more awkward in that it was split in to two main areas. Within each area there are 4 buttons, each which load a new set of items for the menu. I had to make two instances of the slideMenu - one for each side - which to begin with seemed to cause problems because you went to one side and the correct items were shown in the list, but if you actually clicked on one, it was still loading in the pages from the other side.

I found that by including the bits in red, I was able to clear/reset the menu's main variables and load in the fresh new items properly. I don't know if these will apply to you if you only have one instance of the slideMenu, but that's what worked for me.

Hope this helps,

Halesway

[in4p]

I'm actually pretty sure you can't do what you want to.
The work around we use is as follows: we use a custom toolbar on any 'main screen' and hide the navigationbar from the navigation view. On any subsequent view we hide the custom toolbar and show the navigationbar. There are a number of other nuances, and I know it doesn't quite get what your after but hopefully it helps.

You could also look to create an override of the navigationbar, but I'd wish you good luck with that one.

Anyone know of a way to keep the slide button at the left most position when using with a navigation view? I tried modifying the slide button add to be an insert at index 0, but that seemed to have no effect and the back button still appears first in the navigation bar.

This is my modified code:

createSlideButton: function(el, config) {        
        var me = this,
        parent = el.down(config.selector);
        if (parent) {
            return parent.insert(0, Ext.merge(me.slideButtonDefaults, config));
            //return parent.add(Ext.merge(me.slideButtonDefaults, config));
        }
        
        return false;
},

[aeiz]

Thanks for the reply! I ended up hiding the slidebutton when a 'push' event is fired on a navigationview and showing it again when a 'pop' event is fired. This works out well considering all of my navigation views only go a single level deep.

I'm actually pretty sure you can't do what you want to.
The work around we use is as follows: we use a custom toolbar on any 'main screen' and hide the navigationbar from the navigation view. On any subsequent view we hide the custom toolbar and show the navigationbar. There are a number of other nuances, and I know it doesn't quite get what your after but hopefully it helps.

You could also look to create an override of the navigationbar, but I'd wish you good luck with that one.

[Tegola]

I'm getting troubles using the SlideNavigationView with a NavigationView. The views pushed inside the NavigationView are not animated, they just appear. Am I the only one?

[wnielson]

I'm getting troubles using the SlideNavigationView with a NavigationView. The views pushed inside the NavigationView are not animated, they just appear. Am I the only one?

I've successfully used NavigationView within SlideNavigationView in the past. Which version of ST are you using? Its possible that there are some issues with ST 2.1 as I haven't yet fully tested the component with the latest release.

[abierbaum]

I've successfully used NavigationView within SlideNavigationView in the past. Which version of ST are you using? Its possible that there are some issues with ST 2.1 as I haven't yet fully tested the component with the latest release.

I just tried SlideNavigationView with ST 2.1 release, and it is not working. The main viewport is initialized with everything in the upper left hand corner of the screen.

Has anyone else gotten it to work with ST 2.1?

[Tegola]

Its possible that there are some issues with ST 2.1 as I haven't yet fully tested the component with the latest release.

I'm using 2.1rc3. As I said, the SlideNavigationView works perfectly, but any NavigationView used as the SlideNavigation child will "navigate" but will not animate (no left-right slide).

[abierbaum]

Have you tried ST 2.1.0? I am interested to know if I am the only one seeing the issue or if something is significantly broken.

[totalnotme]

dude u need to try appcelerator