0

ViewPort 内の Panel の単純な例では、デフォルトがパネル用autoScrollであるfalseため、パネルにはテキスト オーバーフロー用のスクロールバーがありません。

ここに実際の例があります: http://jsfiddle.net/rqZ4y/ (CD に感謝..)

GridPanel を特徴とする、もう少し複雑な例を次に示します (autoScrollデフォルトはtrueに設定されているため、明示的に設定する必要はありません!)。

Ext.application({
    launch: function () {
        Ext.create("Ext.Viewport", {
//            layout: "fit",
            items: [
                {
                    html: "Hello!"
                },
                {
                    xtype: "grid",
                    title: 'Simpsons Contacts',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [
                        { text: 'Name', dataIndex: 'name' },
                        { text: 'Email', dataIndex: 'email', flex: 1 },
                        { text: 'Phone', dataIndex: 'phone' }
                    ]
                }
            ]
        });
    }
});

作業例: http://jsfiddle.net/gXsPk/

この場合、グリッドにはスクロールバーがありません。

layout: "fit"両方のパネルを表示するために無効にしました。指定するlayout: "fit"と、「Hello!」が発生します。パネルが使用可能なスペースをすべて占有し、グリッドはまったく表示されません。

「こんにちは！」を削除すると パネルを開き、オプションを再導入するlayout: "fit"と、スクロールバー付きのグリッドが表示されます!

作業例: http://jsfiddle.net/VBAyS/

ここで何が間違っているのですか?!

Ext JS 4.1.1a を使用しています

4

1 に答える 1

1

のデフォルトはautoScrollですfalse。

コンポーネント レイアウト要素でautoScroll: true使用するように設定し、必要に応じてスクロール バーを自動的に表示します。overflow:'auto'

作業例: http://jsfiddle.net/rqZ4y/

編集：

vboxレイアウトを使用すると、問題が解決するはずです。

レイアウトを次のように変更しました。

layout: { type: 'vbox', align: 'stretch' }

flex: 1次に、グリッドに追加しました。

作業例: http://jsfiddle.net/gXsPk/1/

于 2013-03-11T18:27:48.080 に答える