carousel panel in sencha-touch

0
votes

I'm new to sencha-touch and I have worked through all panel and layout tutorials; however, I still can't figure out how to fit three different carousel cards into a single panel. I have seen this kind of layout in some of the native apps and I was wondering if this can be done using sencha-touch

enter image description here

1
sencha-touchcarousel
I have actually done this by accident somehow, but it didn't look pretty and did not behave as was expected. - Old McStopher

1 Answers

1
votes

You might be able to achieve a similar effect by using styled Panels within each carousel pane. You would only be able to scroll in batches of 3 at a time. The dots at the bottom would only show the total of 3 panel panes though. Something like:

var carousel = new Ext.Carousel({
   items: [
     new Ext.Panel({
         layout: 'hbox',
         items:[
            new Ext.Panel({html: 'card 1'}),
            new Ext.Panel({html: 'card 2'}),
            new Ext.Panel({html: 'card 3'}),
         ]
     }),
     new Ext.Panel({
         layout: 'hbox',
         items:[
            new Ext.Panel({html: 'card 4'}),
            new Ext.Panel({html: 'card 5'}),
            new Ext.Panel({html: 'card 6'}),
         ]
     }),
     ....
});