2

横長のリストに画像を表示したいと思います。

これは私がこれまでに行ったことです:

var list = Ext.create('Ext.List',{
  store: store,
  itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
  inline:true,
  scrollable: {
    direction: 'horizontal',
    directionLock: true
  }
});

私の店には 5 つのアイテムがありますが、リストには 2 つしか表示されません (画面が 3 つ以上の画像を表示するには十分な大きさではないため)。

リストの幅を次のように 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

「インライン」構成に対して 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。

私はそれを試しませんでした。

これがうまくいくことを願っています。

于 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アイデアは、最初に固定された空を作成することですheight。その後、最終的addにそれにアイテムを追加できます。各項目は好きなものです。たとえばExt.Image、あなたの場合です。各hboxアイテムはコンポーネントであり、必要に応じて簡単にカスタマイズできます。

このアイデアがお役に立てば幸いです。

于 2012-05-18T16:01:35.597 に答える