2

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

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

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

我只看到红色背景？

4

3 回答 3

3

您是否尝试为“内联”配置传递一个对象而不是只传递一个对象：

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 。

我没有尝试过。

希望这对你有用。

于 2012-05-18T16:03:44.497 回答
3

好的，我终于找到了这个很有帮助的工作示例：

http://dev.sencha.com/deploy/touch/examples/production/list-horizo​​ntal/index.html

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

于 2012-05-18T16:32:21.253 回答
1

创建一个水平的不是一个好主意（或者可能是不可能的）Ext.List

如果您倾向于制作“图像滑块”或“轮播”之类的东西，那么最好创建一个Ext.Carousel或更多可定制的东西，hbox. Ext.Carousel很容易而且有据可查，所以我将多谈一点hbox.

hbox这个想法是，首先你用 fixed创建一个空的height。然后，你最终可以将add物品交给它。每个项目都是你喜欢的，例如：Ext.Image在你的情况下。您的每个hbox项目都是一个组件，然后您可以轻松地以您想要的方式对其进行自定义。

希望这个想法有所帮助。

于 2012-05-18T16:01:35.597 回答