extjs面板調整大小，而窗口大小調整

我有一個「表單」佈局，其中包含幾個按鈕的面板。現在我想根據窗口大小調整此面板的大小。我怎樣才能做到這一點？extjs面板調整大小，而窗口大小調整

謝謝。

來源

2011-05-04 Simon

您可以通過設置「可調整大小」配置選項來調整面板大小，請參閱各種選項的文檔：http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html。

就表單組件如何交互而言，如果您想使用表單佈局或切換到帶有各種彈性設置的hbox/vbox類型的設置，則需要設置錨點。

來源

2011-05-05 01:56:01 joekrell

您可以設置窗口大小並將子面板的autoHeight和autoWidth屬性設置爲true。另一種方法是捕獲窗口的resize事件並根據新的大小值調整子面板的大小。

來源

2011-05-10 21:50:09

autoWidth和autoHeight似乎在圖表上下文中不起作用。我不確定我是否做錯了什麼，或者是否有錯誤。 – fraber 2014-01-31 11:39:46

如寫道@deniztt你應該訂閱EventManager類onWindows Resize事件。

它可以是這樣的：

Ext.EventManager.onWindowResize(function() { 

    var width = Ext.getBody().getViewSize().width - 160; 
    var height = Ext.getBody().getViewSize().height - 140; 

    panel.setSize(width, height); 

});

其中面板是參考你的面板

你可以read about it here。

來源

2011-11-26 17:03:36

適合我想要的東西。謝謝！ – codekoala 2013-07-23 16:10:52

Ext.EventManager.onWindowResize(function(w, h){ 
    panel.doComponentLayout(); 
});

假設你有一個名爲「面板」與內置的（例如height: "100%"）一些自動調整大小面板。否則，窗口的新寬度和高度將被傳遞給傳遞給onWindowResize()的匿名函數。

來源

2012-08-30 22:24:53 dinesy

謝謝。這篇文章幫助我完全不同的問題。 – MarthyM 2015-09-17 07:23:02

這是我一直在尋找的解決方案！我不得不調整窗口大小，所以我只是將匿名函數的高度和寬度傳遞給setSize函數。 'window.setSize（w，h）' – avn 2015-10-01 14:46:32

在ExtJS 6中，EventManager不推薦使用，所以使用** Ext.GlobalEvents **代替：'Ext.GlobalEvents.on（'resize'，function（w，h）{.. 。}）;' – ccallendar 2016-05-27 20:24:08

感謝Gegory和Joseph提供的EventManager解決方案。我已經做了該解決方案的一些小的變化，與DIV替換getBody（）和設定我的圖表的初始寬度/高度（或任何其它部件）：

autoWidth和autoHeight似乎

<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div> 
.... 
Ext.onReady(function() { 
    var renderDiv = Ext.get('chart_div'); 
    var chart = Ext.create('Ext.chart.Chart', { 
     renderTo: renderDiv, 
     width: renderDiv.getWidth(), 
     height: renderDiv.getHeight() - 50, 
     ... 
    }); 

    Ext.EventManager.onWindowResize(function() { 
     var height = renderDiv.getHeight() -50; 
     var width = renderDiv.getWidth(); 
     chart.setSize(width, height); 
    }); 
});

不爲我工作（Ext-JS 4.2.1）。

來源

2014-01-31 11:57:20 fraber

extjs面板調整大小，而窗口大小調整

回答

相關問題