水平滚动列表(Horizontal scrolling list)

我想在一个水平列表显示的图像。

这是我到目前为止已经完成：

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

所有项目现在显示的，但现在的问题是列表中没有滚动了。我不能走得更远比屏幕的宽度。

[UPDATE]

我试着用横向盒面板，但没有被显示。任何想法，为什么？

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 。

我没有尝试，但。

希望这会为你工作。