javascript - ExtJで100％の高さと幅のウィンドウを作成するにはどうすればよいですか？

Question

これは機能しませんでした：

new Ext.Window({
    width:'100%',
    height: '100%'
}).show();

私は流動的であるため、ウィンドウのサイズが変更されると、その寸法を変更する必要があります。

Answer 1

window.resizeこれは、イベントを監視することによってのみ達成できます。

Ext.onReady(function() {
    var win = new Ext.Window({
        draggable: false
    });

    win.show();

    win.setSize(Ext.getBody().getViewSize());
    win.setPagePosition(0, 0);
    Ext.fly(window).on('resize', function(e, w) {
        win.setSize(Ext.getBody().getViewSize());
        win.setPagePosition(0, 0);
    });
});

がある場合、私の例は正しく機能することに注意してbodyくださいoverflow: hidden。そうしないと、不要なスクロールバーが表示されます。

このフィドルをチェックしてください。

Answer 2

これは、ビューポートを作成することによっても実現できます。ビューポートは、要求していることを正確に実行するように設計されています。簡単な例を次に示します。これは、高さ/幅を指定する必要がないことを示しています。

Ext.onReady(function(){

    var thisView = new Ext.Viewport({
        layout:'anchor',
        items:[
            {   title: 'Section 1'
                ,html: 'some content'
            }
            ,{  title: 'Section 2'
                ,html: 'some more content'
            }
        ]
    });

});

あなたはそれを「見せ」さえする必要がないことに気付くでしょう。

編集：ああ、これらのhtmlセクションに長いコンテンツを追加すると、ブラウザウィンドウのサイズを変更すると、すべてのコンテンツが表示されるように高さが自動的に変更されることにも注意してください。