Sliding Side Menu

[ingo.hefti]

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?

In my understanding it should add the new item to the menu list. Of course if you want to have it open a panel in the container at the same time, then that will require some more efforts.

[urmilsetia]

In my understanding it should add the new item to the menu list. Of course if you want to have it open a panel in the container at the same time, then that will require some more efforts.

Mate, what would be the point of adding any item in the slideOut List, if doesn't show a panel??

[ingo.hefti]

Mate, what would be the point of adding any item in the slideOut List, if doesn't show a panel??

Maybe we are not talking about the same thing...? All I'm saying is, that when you add an item to the store, then it should visibly add this item to the menu list. Nothing more, nothing less... Once you tap on the new item, then it will open its panel / container / view...

[ingo.hefti]

I did a quick check to verify: when looking at the code in the view.js then you can find a function addItems(). It is used once the component is instantiated to add your config to the list store. You can use the same function to add more items to the end of the list (maybe not exactly what you want to achieve, but as a POC it might be enough). So this is what I did in one of my controllers:

        var nav = this.getSliderMenu();
        nav.addItems({
            title: 'test xyz',
            slideButton: true,
            items: [{
                xtype: 'panel',
                html: 'test panel'
            }]
        });

And guess what, it adds a new item to the list.

[wnielson]

Yeah,

addItems

is undocumented, but it should do what you want.

[gkatz]

@wnielson
I have noticed that if I comment out this.list.select(0) from the source code of the component. the component stops working. side menu stays open, menu is not clickable nor scrollable.
it seems to me like the component should continue working but display an empty container or something. why is there initialization logic of the component so coupled with the list selection?
thanks

[gkatz]

also; not sure if this was raised already:
if the first item has a handler only (like item 2), the component will not work... which is bad for me because I need an all handler items.
is there a bypass?
thanks

[wnielson]

I have noticed that if I comment out this.list.select(0) from the source code of the component. the component stops working. side menu stays open, menu is not clickable nor scrollable.
it seems to me like the component should continue working but display an empty container or something. why is there initialization logic of the component so coupled with the list selection?
thanks

The list controls which item to display in the main container. Therefore, the component listens to the 'select' event on the list and updates the main container accordingly. If you want to change the default container, don't comment out "this.list.select(0)", but instead change it to select a different component--there needs to be a default component to render. It is for this reason that the default item cannot be one that is a handler (function call) only. The work around is to change 'this.list.select(0)' to select whatever component you want to be the default.

Hope that helps.

[urmilsetia]

Yeah,

addItems

is undocumented, but it should do what you want.

wnielson, I did exactly that! however it said private method.

Also how to remove it?
What I am doing is removing the item from the list store and then destroying the panel by the id which I passed when adding it.

[wnielson]

wnielson, I did exactly that! however it said private method.

Also how to remove it?
What I am doing is removing the item from the list store and then destroying the panel by the id which I passed when adding it.

See this post.