sencha-touch - 水平滚动列表

Question

我想在水平列表中显示图像。

这是我到目前为止所做的:

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',

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

[更新]

我试过使用 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:

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 .

虽然我没有尝试过。

希望这对你有用。