水平滚动列表

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

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

[更新]

我已经试过了横向盒面板，但没有被显示。任何想法为什么？

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

你尝试传递对象，而不是只是真正的为“内联”的配置：

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

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

如果你往往会产生类似“图像滑块”或“旋转木马”，然后如果你创建一个会更好Ext.Carousel或更多可定制的东西，hbox。 Ext.Carousel很容易且有很好的文档记录，所以我会多谈一些关于hbox的信息。

这个想法是，首先创建一个空的hbox与固定height。然后，你可以最终add项目。每个项目是无论你喜欢，例如：Ext.Image你的情况。您的hbox项目中的每一个都是一个组件，那么您可以轻松地按照自己的方式对其进行自定义。

希望这个想法有帮助。

Answer 3

好吧，我终于发现这是非常有帮助的该工作示例：

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

你也可以找到它在examples/production/list-horizontal当你下载煎茶触摸2