Sliding Side Menu

[wnielson]

@koladarci

Take a look at https://github.com/toorshia/jam

Never mind the whole "jam jar" thing, that's just my creative side overreacting


@wnielson

I hope you're OK with how I frankensteinized your menu
I didn't put any credits yet but I'll make sure you're there.

One question - you've stated it's an MIT license. But as far as I know ST2 is GPL (or is it lGPL) which essentially makes your code GPL, right? Sorry for off-topic, just want to make sure my wires are not crossed...

Yeah dude, feel free to modify it as you see fit. As for the license, according to the Sencha licensing terms here, I'm pretty sure that my code stays MIT. That said I'm not a lawyer and frankly got bored reading that page after the first few paragraphs.

[wnielson]

I would like to thank Weston for posting his work. This is an excellent example.

You're welcome--glad you have found it useful!

I have hacked the code quickly to support a right button so that a right view panel can be hidden and shown. Feel free to cleanup the code. This was just so I could get a proof of concept done.

I haven't looked through all of your changes, but since you have posted this I've added the ability to dock the menu to either the right or left side (thanks largely to a patch submitted by a fellow user). I'm considering adding the ability to have dual menus.

[wnielson]

Thank you for the slider, it works great.

I like to add additional icon to the top bar apart from the "more" button.

If I understand what you are going for, I think you're going about it the wrong way. The plugin doesn't require that you have a toolbar in the main container--if you want one, it is up to you to add it. The ``slideButton`` configuration is there simply to make your life easier if you choose to use a toolbar by adding a button with open/close functionality into your toolbar for you. So, in summary, create a toolbar in your container/panel as you normally would, position the buttons there as you desire and then use the ``slideButton`` config to have the button automatically added.

Hope that helps.

[wnielson]

Hello everyone,
Having a deeper look at the source code, I see that the slide menu extends an Ext.List.
Is it possible to "customize" the sliding menu? I mean I don't want to use basic list. I want to put other components in it (buttons, images,etc.) and want to change screen when click them.
Highly appreciate if you have any ideas. Thanks.

As it is implemented now, this isn't possible. A ``Ext.dataview.List`` is explicitly created, so it isn't possible to change it (at least not easily).

[gkatz]

1st of all thanks for the component.
few question:
1. can caching of views be disabled by config?
2. how should I use this component to achieve the following approach:
every click on the list creates its view dynamically and destroys the last displayed one (for DOM performance)
3. how can I choose the view to be displayed when loading the component? I want item number 6 to be displayed with application startup instead of the first item. tried activeItem property but apparently its not the way
thanks!

[wnielson]

1. can caching of views be disabled by config?

No, not currently. You can, however, manually delete items from the cache by removing them from the ``_cache`` object.

2. how should I use this component to achieve the following approach:
every click on the list creates its view dynamically and destroys the last displayed one (for DOM performance)

I'd do this by listening to the ``select`` event. For example (this is totally untested):

slidenav.on({
  select: function(slidenav, newItem, index) {
    Ext.Object.each(slidenav.container._cache, function(idx, item) {
        if (idx != index) {
            delete slidenav.container._cache[idx];
            if (Ext.isFunction(item.destroy)) {
              item.destroy();
            }
        }
    });
  }
});

3. how can I choose the view to be displayed when loading the component? I want item number 6 to be displayed with application startup instead of the first item. tried activeItem property but apparently its not the way

Again, currently there isn't an "easy" way to do this (it's been on the todo list for awhile). The best way currently would probably to make a subclass of the slide view and overload the initialize function, where you can then manually define ``this.list.select(6)``. Alternatively, you might be able to get away with listening to the ``select`` event on the slide view and checking for the _init boolean--if it is ``false``, then you can return ``false`` from the listener and select the desired item instead.

Hope that helps.

[ingo.hefti]

No, not currently. You can, however, manually delete items from the cache by removing them from the ``_cache`` object.

I'd do this by listening to the ``select`` event. For example (this is totally untested):

slidenav.on({
  select: function(slidenav, newItem, index) {
    Ext.Object.each(slidenav.container._cache, function(idx, item) {
        if (idx != index) {
            delete slidenav.container._cache[idx];
            if (Ext.isFunction(item.destroy)) {
              item.destroy();
            }
        }
    });
  }
});

This seems to do the job! Thanks for the input.

[urmilsetia]

Thanks wnielson, the library is really good!

Just wanted to know, how can I add new container to the SlideOut Navigation at run time.
I added a function to get the instance of the navigation list to change title and stuff on the go.
My requirement is based on application activation, I want to add one more option to the list.

[ingo.hefti]

Just wanted to know, how can I add new container to the SlideOut Navigation at run time. I added a function to get the instance of the navigation list to change title and stuff on the go. My requirement is based on application activation, I want to add one more option to the list.

The driver of the menu is a store. So you will have to manipulate the store to change the shown menu. That shouldn't be to difficult...

[urmilsetia]

The driver of the menu is a store. So you will have to manipulate the store to change the shown menu. That shouldn't be to difficult...

I did that by adding a function to return the instance of list, however simply adding an item to list store won't added a referenced panel, will it?