1

私はこれに何日も費やしましたが、なぜそれがデフォルトの動作であるべきだと思われることを行うのがなぜそれほど難しいのか、真剣に理解できません. 他の投稿では、私が達成したい動作を防ぐ方法を尋ねているように見えるので、何か非常に間違ったことをしているに違いありません。

このコンポーネントを配置したい：

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',
    scrollable: 'true',

    config: {
        scrollable: 'true',
        layout: 'vbox',

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                docked: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'
            },

         // more items to come here
        ]
    }
});

このカルーセルに:

Ext.define('Proximity.view.result.ResultCarousel', {
    extend: 'Ext.Carousel',
    xtype: 'detailcarousel',

    config: {
        store: 'RemoteResultStore',
        direction: 'horizontal',
        fullscreen: true,

        defaults: {
            styleHtmlContent: true,
            scrollable: true
        }  
    }
});

コンテンツが現在の画面からはみ出す場合は、一番下までスクロールできるようにします。

しかし、パネルをアイテムの束としてカルーセルに追加すると、カルーセルの各ページが垂直方向にロックされます。DetailPanel コンポーネントからのオーバーフローは画面外にあり、まったく到達できません。

ここ数日、レイアウト、スクロール、スクロール可能、フルスクリーン、ドッキング、アイテム スタッキングの考えられるすべての組み合わせを試しましたが、すべて無駄でした。最終的には、各 DetailPanel の下部にいくつかのボタンを追加したいと考えていますが、現時点では特に実現可能ではないようです。

これを機能させる方法はありますか？シンプルなはずですよね？

4

1 に答える 1

3

答えを見つけたので、ここと Sencha Touch フォーラムに投稿します。

「scrollDock」と呼ばれる文書化されていない構成オプションがあり、私がやろうとしていたすべてのことを意図したとおりに機能させることがわかりました。

次のコードが正しくスクロールするようになりました。

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',

    config: {
        layout: {
            type: 'vbox',
            align: 'start',
            pack: 'start'
        },

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                cls: 'detail-panel',
                layout: 'fit',
                scrollDock: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'

            },
            // more stuff here
        ]
    }
});

これがドキュメントに値しない理由が本当にわかりません。Sencha の誰かが私たちを啓発してくれるのではないでしょうか?

とにかく、ここで手がかりを見つけました: http://www.sencha.com/forum/showthread.php?250883-Container-on-top-of-a-list

乾杯！

于 2013-06-10T09:51:57.827 に答える