0

再現するソースと問題の説明は、githubにあります： https ：//github.com/romacafe/extjs_4.1.1_scrollIssue

タブパネルに2つの「無限グリッド」があり、境界線レイアウト内にネストされたextjs 4.1.1（GPLバージョン）アプリケーションを作成しようとしています。

  • バッファリングされていない（無限ではない）グリッドをOKにレンダリングできますが、スクロールバーがありません。
  • グリッドを構成して無限スクロール用に保存すると（バッファーストア、グリッド上のverticalScroller構成）、データがまったくレンダリングされません。
  • 全体として、ウィンドウのサイズを変更しても、レイアウト全体のサイズは変更されません。

アプリケーションは、ドキュメントの本文ではなく、divにレンダリングされます。これは私にとって重要ですが、問題の原因になっている可能性があります。参照されているgithubリポジトリで問題を完全に再現しました。

どんな助けでも大歓迎です！:)

4

1 に答える 1

1

あなたの問題は、親コンテナーのレイアウトを指定できないことにあると思います。これにより、タブパネルの本体が無期限に拡張されます。これにより、グリッドがレイアウトから定義された高さ/幅を取得できなくなり、バッファリングされたグリッドで高さがゼロのグリッドになり、静的グリッドのすべてのレコードを含むように高さを拡張するグリッドになります。app.js のセンター パネルの定義でうまくいったのは次のとおりです。

//Store a reference to the main element that you create and add the to application div
ScrollIssue.element = Ext.create('Ext.container.Container', {
    renderTo: 'application',
    height: windowHeight,
    layout: 'border',
    bodyBorder: true,
    defaults: {
        bodyPadding: 5
    },
    items: [
        {
            title: 'Filters',
            region:'north',
            floatable: false,
            margins: '5 0 0 0',
            height: 150,
            minHeight: 150,
            maxHeight: 150,
            collapsible: true,
            collapsed: true,
            html: 'filters would go here'
        },
        {
            title: 'Main Content',
            region: 'center',
            margins: '5 0 0 0',
            //Add a layout here
            layout: 'fit',
            items: [
                Ext.widget(
                    'tabpanel', {
                        activeTab: 0,
                        plain: true,
                        //Add a layout here
                        layout: 'fit',
                        //Change this to regular padding
                        defaults: {padding: 10},
                        items: [
                            {
                                title: "Static",
                                xtype: 'staticGrid'
                            },
                            {
                                title: "Buffered",
                                xtype: "bufferedGrid"
                            }
                        ]
                    }
                )
            ]
        },
        {
            title: 'Detail',
            region: 'south',
            height: 150,
            minHeight: 100,
            maxHeight: 250,
            html: 'Detail Panels',
            collapsible: true
        }
    ]
});

//Listen to the window resize event and reset the height to
// 50 pixels less than the total viewport height to account
// for the banner above
Ext.EventManager.onWindowResize(function(w, h) {
    ScrollIssue.element.setHeight(h - 50);
})

メイン コンテンツとタブ パネルの両方に「layout: fit」が追加されていること、および bodyPadding から通常のパディングに変更されていることに注意してください (ボディ スタイルにより、水平スクロール バーが表示されます)。

EDIT ウィンドウのサイズ変更を機能させるには、最上位の ext コンポーネントにウィンドウの高さの変更を伝える必要があります。上部のバナーはコード内のどこにもないため、画面上の他の要素のサイズや、レイアウト マネージャーがそれらと対話する方法を知ることができません。さらに、ここにあるように高さを静的な値に設定すると、コンテナが変更されても変更されません。ただし、ウィンドウのサイズが変更されたときに高さを明示的にリセットすると、うまくいきます。

于 2012-11-07T15:50:10.133 に答える