0

もう一度、この素晴らしいコミュニティの助けが必要です。

コントローラーで Ext.Picker を作成すると問題が発生します

ここに私のピッカーの簡単なバージョンがあります:

var picker = Ext.create('Ext.Picker', {
    slots: [
        {
            name : 'limit_speed',
            title: 'Speed',
            data : [
                {text: '50 KB/s', value: 50},
                {text: '100 KB/s', value: 100},
                {text: '200 KB/s', value: 200},
                {text: '300 KB/s', value: 300}
            ]
        }
    ]
});
Ext.Viewport.add(picker);
picker.show();

Picker パネルがポップアップしたら、画面全体をスクロールできます。

下部にパネルが表示されます 国境を越えてスクロールした

可能な限り属性を設定しようとしましたscrollable: falseが、それでも境界線をスクロールできます。

さらに奇妙な事実がいくつかあります。下にスクロールできる距離はさまざまであり、これが何に依存しているのかわかりません。画面全体が黒くなるまでスクロールできる場合もありますが、まったくスクロールできない場合もあります。さらに、このバグは各デバイスでは発生しません。たとえば、私は Android 4.1.1 を搭載した HTC One S でこれらの問題を抱えていますが、Android 4.1.1 を搭載した HTC One X はこのバグの影響を受けません。

誰かがコード全体を見たい場合:

すべてをまとめた TimerPanel を表示: http://pastebin.com/2FiPgZqW

TimerEdit を表示: http://pastebin.com/yv08tsYk

ピッカーをいつ起動するかを指示するコントローラー: http://pastebin.com/LkQWhaAF

これが既知のバグなのか、それとも私が何か間違ったことをしているのか、誰か教えてもらえますか?

4

1 に答える 1

1

簡単に見てみましょう... 主要な問題 - 過剰なネスト。ビューはコンテナ (またはすべてのコンテナ属性を継承するパネル) であり、レイアウトに適合します。その中に 1 つのアイテムがあります - レイアウト vbox を持つコンテナ (6 つのアイテムを持つ - ネストとネストを続けます...)。

最初のコンテナ (ビュー) は、別のビュー/パネルの領域を埋めるためのものですか? つまり、なぜlayout:fitを使用しているのですか?

仮定: このパネルはスタンドアロン ページのように見えますが、スクロールやオーバーフローを行わずにフルスクリーンで表示する必要があります。

上部のコンテナーの 1 つを削除して、次のようにします。

Ext.define('MyApp.view.TimerPanel', {
    extend: 'Ext.Container',
    alias: 'widget.timer',

    config: {
        layout: {
            type: 'vbox',
        },
        scrollable: false, // shouldn't be needed.
        fullscreen: true,
        items: [{
            xtype: 'container',
            docked: 'top',
            height: 50,
            layout: {
                type: 'hbox'
            },
            ...

コンテナは「フルスクリーン」から画面を埋め、子要素にある vbox|flex 値は必要な比率を提供します。

あなたが経験していたのは、ビューを過度にネストしたり、設定を過剰に構成したりすることによる「フォーム/フィールド要素のバグのドラッグの原因となるスクロール」でした。Sencha には、設定されていないほとんどのオプションのデフォルトとフォールバックがあります。いくつかのものは、設定されると、何か他のものと競合します。フィールドのすべてのリスナーにタッチイベントを追加すると、コードはダミーを吐き出し、エラーを引き起こし始めます。

ページでスクロール/ドラッグ エラーが発生し始めたら、まずフルスクリーンとスクロール可能のすべての設定を削除します (つまり、true/false/other に設定されていない - 削除してください!)。次に、レイアウトをチェックします。最も単純なものを使用していることを確認してください。必要なものを表示する方法。次に、絶対に必要なときにフルスクリーン/スクロール可能に追加を開始します。

スクロール可能に関しては、さらにいくつかの説明が役立つようです:D スクロールの複雑な設定の例:

scrollable: {
    direction: 'vertical',
    directionLock: true,
    translatable: {
        translationMethod: 'auto'
    },
    momentumEasing: {
        momentum: {
            acceleration: 30,
            friction: 0.5
        },
        bounce: {
            acceleration: 20,
            springTension: 0.5,

        },
        minVelocity: 5
    },
    outOfBoundRestrictFactor: 0
},

スクロールしない例:

    scrollable: false,

scrollable-y true、scrollable-x false の簡単な方法:

    scrollable: 'vertical',

Scrollable は、文字列構成とオブジェクト構成の両方を受け入れます。

これがすべて役立つことを願っています。乾杯、G

PS それでも問題が解決しない場合は、時間を見つけてもう一度やり直して、動作するコードを提供できるようにします。

于 2013-08-14T09:56:21.577 に答える