3

itemTPL 行ごとに水平オーバーフローを持つ Sencha Touch 2.1 でリストを作成しようとしています。これはまだ縦型のリストですが、コンテンツが多すぎて 1 行に表示できません。

そのため、幅が設定され、水平スクロールが可能なラッパー コンテナーにリストを配置しました。これにより、ヘッダーとリストのコンテンツを水平方向に移動できます。それは実際に機能します。ただし、スクロールがリリースされると、0 に戻ります。また、スクロールバーがコンテナーのビューポートに対して明らかに大きすぎるため、これが正しくレンダリングされていないことがわかります。

一番上のコンテナを自由にスクロールできるようにする方法を知っている人はいますか?

サンプルはここにあり、アイコンが小さなウィンドウにあふれています。スクロールして完全なアイコンを表示することはできますが、スクローラーをそのままにしておくことはできません... http://www.senchafiddle.com/#dSMpw

Ext.application({
name: 'SenchaFiddle',
models:['Model'],
stores:['Store'],

launch: function() {
    var list = Ext.create('Ext.List',{
        store: 'Store',
        itemTpl: new Ext.XTemplate('<img src="{icon}" width=750 height=50/>'),
        flex:1
    });

    var panel = Ext.create('Ext.Container', {
        layout:'vbox',
        width:750,
                    scrollable : {
                        direction     : 'horizontal',
                        directionLock : true
                    },
        items: [
            {
                html: 'Header bar',
            },
            list
        ]
    });

    Ext.Viewport.add(panel)
 }
});
4

2 に答える 2

2

これを探していましたが、どうやらこれを達成できないようです。ルールは次のとおりです。

  • アイテムを水平に表示したい場合は、データビューを使用してください
  • 項目を縦に表示したい場合は list を使用します
  • アイテムをグループ化する必要がある場合は、リストを使用します

Ram G Atheryaによって与えられた提案された回答については、

ソースコードを見ると、リスト（xtype： 'dataview'）ではなくデータビューを使用しており、「inline：wrap：false」により、項目が水平にスクロールされ、次の行に折り返されていません..

于 2013-04-26T09:18:51.310 に答える
0

私はあなたの質問を完全には理解していませんが、これはあなたが望むものだと思います...あなたがする必要があるのはリストのインラインラップをfalseに設定することだけです

inline: {
        wrap: false
},
于 2012-12-29T10:07:18.407 に答える