水平滾動列表

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