web-dev-qa-db-ja.com

maxHeightまでのコンテンツに基づいてExtJSウィンドウの自動サイズ設定

Ext JS 4.0.2を使用して、高さ制限に達するまで、コンテンツに合わせて自動的にサイズが大きくなるウィンドウを開こうとしています。高さ制限に達すると、ウィンドウは大きくなりなくなり、スクロールバーが表示されます。

これが私がしていることです

Ext.create('widget.window', {
    maxHeight: 300,
    width: 250,
    html: someReallyBigContent,
    autoScroll: true,
    autoShow: true
});

ウィンドウが最初にレンダリングされるとき、それは本当に大きなコンテンツに十分な大きさであり、maxHeightが許容するよりも大きいです。サイズを変更しようとすると、maxHeightの300pxにスナップダウンします。

最初にレンダリングされたときにウィンドウをmaxHeightに制限するにはどうすればよいですか？

extjsextjs4
14
Mike M. Lin

私はまったく同じ問題を抱えており、今のところ私は少し汚いハックをしています:)

_this.on('afterrender', function() {
    if (this.getHeight() > this.maxHeight) {
        this.setHeight(this.maxHeight);
    }
    this.center();
}, this);
_

ウィンドウの内容に応じて、afterlayoutイベントを使用する必要があります。 _this.maxHeight_を使用する代わりに、ビューポート全体を使用するには、Ext.getBody().getViewSize().heightを使用するか、Vanilla JSでは_window.innerHeight_を使用します。

このバージョンは、ウィンドウに巨大なhtmlだけでなく、他のコンポーネントが含まれている場合でも機能します。

_listeners: {afterlayout: function() {
    var height = Ext.getBody().getViewSize().height;
    if (this.getHeight() > height) {
        this.setHeight(height);
    }
    this.center();
}}
_
8
Ivan Novakov

フォームに不明な数のフィールドがあるウィンドウを表示することになった方法（constrain = body.el）：

prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
    layout : {
        type : 'vbox',
        align : 'center'
    },
    buttons : buttons,
    maxHeight : constrain.dom.clientHeight - 50,
    title : title,
    items : prefForm,
    listeners : {
        afterrender : {
            fn : function(win) {
                var f = win.down('#prefForm');
                f.doLayout();
                var h = f.body.dom.scrollHeight;
                if (f.getHeight() > h)
                    h = f.getHeight();
                win.setHeight(h + 61);
                win.center();
            },
            single : true
        }
    }
});
1
Peter Hawkins

これを行うためのすぐに使える方法がわかりません。ただし、次のアプローチを試すことができます。

ウィンドウのコンテンツをウィンドウ内のコンテナーに配置します（つまり、someReallyBigContentをコンテナー内に配置します）。afterrenderで、その内側のコンテナーの高さを取得し、に基づいて外側のウィンドウの高さを設定します。それ。

1
JD Smith

これはより良いかもしれません：

bodyStyle: { maxHeight: '100px' }, autoScroll: true,
1
Mounirsky

この設定をウィンドウに追加できます

maximizable: true

必要に応じて、プログラムでそのボタンを「クリック」することができます:)

0
dbrin

私は少し違う問題を抱えていました。私の場合、HTMLポップアップウィンドウ内にExtJSコードがあります。そして私は達成しなければなりませんでした：
ポップアップウィンドウのサイズを変更するときにパネルのサイズを変更します。 IvanNovakovのソリューションは私のために働きました。

Ext.EventManager.onWindowResize(function () {

       var width = Ext.getBody().getViewSize().width - 20;
       var height = Ext.getBody().getViewSize().height - 20;
        myPanel.setSize(width, height);

});
0
Binod Suman

今、私はあなたが何をしようとしているのかわかります。設定に欠けているのは高さパラメータだけだと思います。 maxheightと同じ数に設定します。これでうまくいくはずです。setHeight（）を呼び出す必要はありません。

0
dbrin

これは Ivan Novakov の答えと同じですが、これらのタイプのクラスのonRenderクラスをオーバーライドするときに優先する点が異なります。

これにはいくつかの理由があります。追加のイベントリスナーを削除します。アフターレンダリング時に発生する必要のあることが複数ある場合。これらのタスクの同期を制御できます。

onRender: function(ct,pos) {
    //Call superclass
    this.callParent(arguments);
    if (this.getHeight() > this.maxHeight) {
        this.setHeight(this.maxHeight);
    }
    this.center();
}
0
Vu Nguyen