Горизонтальная прокрутка списка

Question

Я хотел бы, чтобы изображения отображались в горизонтальном списке.

Это то, что я сделал до сих пор:

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

В моем магазине 5 товаров, но в списке только два (потому что экран недостаточно велик для отображения более двух изображений).

Я попытался решить эту проблему, установив ширину моего списка в 1000 пикселей следующим образом:

style:'width: 1000px',

Все элементы теперь отображаются, но теперь проблема в том, что список больше не прокручивается. Я не могу идти дальше, чем ширина экрана.

[ОБНОВИТЬ]

Я пытался с панелью hbox, но ничего не показывает. Есть идеи почему?

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]);

Я просто вижу красный фон?

Answer 1

Вы пытались передать объект вместо true для конфигурации "inline":

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

В документах они упоминают, что это позволяет избежать проблемы с переносом и обеспечивает горизонтальную прокрутку: http://docs.sencha.com/touch/2-0/.

Я не пробовал это все же.

Надеюсь, это сработает для вас.

Answer 2

Хорошо, я наконец нашел этот рабочий пример, который был весьма полезен:

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

Вы также можете найти его в examples/production/list-horizontal при загрузке Sencha Touch 2

Answer 3

Это не очень хорошая идея (или может быть невозможно) создать горизонтальную Ext.List

Если вы склонны создавать что-то вроде "слайдера изображений" или "карусели", то было бы лучше, если бы вы создали Ext.Carousel или что-то более настраиваемое, hbox, Ext.Carousel легко и хорошо документировано, поэтому я буду говорить немного больше о hbox,

Идея состоит в том, чтобы сначала создать пустой hbox с фиксированным height, Затем вы можете в конечном итоге add предметы к нему. Каждый предмет - то, что вам нравится, например: Ext.Image в твоем случае. Каждый из ваших hbox элемент является компонентом, то вы можете легко настроить его так, как вы хотите.

Надеюсь, эта идея поможет.