水平滚动列表

我希望将图像显示在水平列表中。

这就是我到目前为止所做的：

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

我的商店有 5 个商品，但列表只显示两个（因为屏幕不够大，无法显示两个以上的图像）。

我尝试通过将列表的宽度设置为 1000px 来解决这个问题，如下所示：

style:'width: 1000px',

现在所有项目都已显示，但现在的问题是列表不再可滚动。我不能超出屏幕的宽度。

[UPDATE]

我尝试过使用 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]);

我只看到红色背景？

您是否尝试传递一个对象，而不仅仅是“内联”配置的 true ：

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/#!/api/Ext.dataview.DataView-cfg-inline http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.DataView-cfg-inline.

不过我没有尝试。

希望这对你有用。