Switch between Carousel and Container

Question

I am creating a view which should work both ways: depending on which button on the toolbar you click, you either get the two lists in a carousel, or in a hbox container (each list taking 50% of the width).

How can I switch my view between Container and Carousel?

I tried to change the xtype from carousel to container

Ext.getCmp("myView").xtype='container';

and I have tried setting the extend

Ext.getCmp("myView").extend='Ext.Container';

and of course I tried combining the two.

Answer 1

by default and documented way. you cannot do this.

I think i've tried this and fout out that the layout can't be changed dynamicly on runtime.

that being said, this is not Impossible :D. As for now i got 2 solution for you.

1.Quite orthodox way use a tabpanel with 2 items. 1 item with carousel layout 1 item with hbox layout this approach will make you having 4 list to take care of.

2.The dynamic way On your current view set the layout as "fit" and just put titleBar/toolbar as the child component and make sure it's docked. inside that titlebar/toolbar put 2 button as a way of changing the view now on the controller class you need a init function that will add a "container" which have desired default layout and the list to the view.

when user press the other button you will remove all items from the view (docked item will not be affected) and add another container with desire layout and list.

PS:Currently I have no idea on how you will sync the scrollbar of the list when you change the view I just know that if that is possible than you'll be needed to put a lot of effort (or you can try to mew around with dom selector to get the list as element and then access the scrollbar)

Answer 2

You can achieve this with a card layout on the View. One card being a Container with hbox layout and second card being a carousel with the lists. Based on the toolbar button clicked, you can switch the card on the view.

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.layout.Card