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

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

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

我只看到红色背景？

Answer 1

你是否尝试传递一个对象，而不仅仅是为'inline'配置传递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

我没试过。

希望这对你有用。

Answer 2

好的，我终于找到了这个非常有用的工作示例：

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

下载Sencha Touch 2时，您也可以在examples/production/list-horizontal找到它

Answer 3

创建水平Ext.List

并不是一个好主意（或可能是不可能的）

如果您倾向于制作类似“图片滑块”或“轮播”的内容，那么最好创建Ext.Carousel或更可自定义的内容hbox。 Ext.Carousel很简单且记录良好，因此我将更多地讨论hbox。

我们的想法是，首先创建一个固定hbox的空height。然后，您最终可以add项目。每个项目都是您喜欢的任何内容，例如：Ext.Image。您的每个hbox项都是一个组件，然后您可以按照自己的方式轻松自定义它。

希望这个想法有所帮助。

水平滚动列表

3 个答案: