Horizontal scrolling list

Question

I would like to have images displayed in a horizontal list.

This is what I've done so far :

var list = Ext.create('Ext.List',{
  store: store,
  itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
  inline:true,
  scrollable: {
    direction: 'horizontal',
    directionLock: true
  }
});

My store has 5 items, but the list only display two (because the screen is not large enough to display more than two images).

I tried to solve this problem by setting the width of my list to 1000px like so :

style:'width: 1000px',

All the items are now shown, but now, the problem is the list is not scrollable anymore. I can't go further than the width of the screen.

[UPDATE]

I've tried with a hbox panel but nothing is showing. Any idea why ?

var hbox = Ext.create('Ext.Panel',{
  layout:'hbox',
  style:'background-color:red;',
  data: [
              {name: 'Jamie',  age: 100},
              {name: 'Rob',   age: 21},
              {name: 'Tommy', age: 24},
              {name: 'Jacky', age: 24},
              {name: 'Ed',   age: 26}
          ],
  tpl: new Ext.XTemplate('{name}')
});

this.setItems([hbox]);

I just see a red background?

Answer 1

Did you try passing an object instead of just true for the 'inline' config:

var list = Ext.create('Ext.List',{
   store: store,
   itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
   inline: { wrap: false },
   scrollable: {
     direction: 'horizontal',
     directionLock: true
   }
});

In the docs, they mention this avoids your wrapping problem and enables horizontal scrolling: http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.DataView-cfg-inline.

I did not try it though.

Hope this will work for you.

Answer 2

Ok, I finally found this working example which was quite helpful :

http://dev.sencha.com/deploy/touch/examples/production/list-horizontal/index.html

You can also find it in the examples/production/list-horizontal when you download Sencha Touch 2

Answer 3

It's not a really good idea (or might be impossible) to create a horizontal Ext.List

If you tends to produce something like "image slider" or "carousel", then it would be better if you create an Ext.Carousel or something that is more customizable, hbox. Ext.Carousel is easy and well-documented, so I will talk a little bit more about hbox.

The idea is, first you create an empty hbox with fixed height. Then, you can eventually add items to it. Each item is whatever you like, for example: Ext.Image in your case. Each of your hbox item is a component then you can easily customize it the way you want.

Hope this idea helps.