基於內容的自動調整Ext JS窗口，最大爲maxHeight

使用Ext JS 4.0.2，我試圖打開一個窗口，它自動調整大小以適應其內容，直到達到高度限制指向它停止變大並顯示滾動條。基於內容的自動調整Ext JS窗口，最大爲maxHeight

下面是我在做什麼

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

當第一次呈現的窗口，它是真正的大尺寸內容不夠大 - 比maxHeight大應該允許。如果我嘗試調整其大小，然後捕捉到300px的maxHeight。

如何在初始渲染時將窗口限制爲其maxHeight？

來源

2011-07-06 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或在香草JS使用window.innerHeight。

這個版本將工作，即使在Windows中包含的其他組件，而不僅僅是巨大的HTML：

listeners: {afterlayout: function() { 
    var height = Ext.getBody().getViewSize().height; 
    if (this.getHeight() > height) { 
     this.setHeight(height); 
    } 
    this.center(); 
}}

來源

2011-12-15 10:40:33

它看起來像一個setSize（null，null）做這項工作。 – Drasill

@Drasill'setSize（null，null）'如果窗口包含其他組件而不是簡單的html，則不起作用。 –

你可以，如果你願意，你可以編程「點擊」那個按鈕:)

來源

2011-07-08 23:43:55 dbrin

感謝。這是一個有趣的解決方案。在這種情況下，我必須「點擊」最大化按鈕兩次：一次最大化，然後再次恢復。然後，我不得不面對一個我可能不想要的最大化按鈕的副作用。如果我以編程方式解決這個問題，那麼像'win.setHeight（win.maxHeight）;'會更簡單一些。 –

現在我明白你正在嘗試做你的窗口

maximizable: true

上添加此配置。我認爲你的配置中唯一缺少的是高度參數。將其設置爲與maxheight相同的編號。應該這樣做，你不需要調用setHeight（）。

來源

2011-07-18 06:35:04 dbrin

如果內容總是太大，則可以使用。但是如果它有時會變小，並且不需要完整的高度。在這種情況下，我希望窗口「縮小到適合」。 –

我看不出來的最現成的方式做到這一點。但是，您可以嘗試以下方法：

將窗口內容放入窗口內的容器中（即，使某個真正的大容量內容位於容器內）。在afterrender上獲取該內容器的高度，然後繼續設置基於此的外窗的高度。

來源

2011-12-15 19:42:51

我是如何結束在窗體上顯示與領域的未知量的窗口（限制= 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 
     } 
    } 
});

來源

2011-12-30 00:48:07

這就像Ivan Novakov答案，但我更喜歡它，當你覆蓋onRender類用於這些類的類。

這是有幾個原因的。刪除一個額外的事件偵聽器，並在這種情況下，有多個事情需要在渲染時發生。您可以控制這些任務的同步。

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

來源

2014-02-04 20:04:20

我有一點點不同的問題。在我的情況下ExtJS代碼裏面的HTML彈出窗口。我必須實現：
當我們改變彈出窗口的大小時，改變面板的大小。 Ivan Novakov的解決方案爲我工作。

Ext.EventManager.onWindowResize(function() { 

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

});

來源

2015-03-18 12:08:23

歡迎來到Stack Overflow！這真的是一個評論，而不是**原始問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – DavidPostill

這可以更好：

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

來源

2015-12-07 19:58:22 Mounirsky

基於內容的自動調整Ext JS窗口，最大爲maxHeight

回答

相關問題