Geek Answers Handbook

Resizing extjs panel when resizing window

I have a panel with a layout "form" containing several buttons. Now I want to include this panel size in accordance with the resizing of the window. How can i do this?

thanks.

+4
source share
5 answers

You can resize the panel by setting the "resizable" config option, see the docs for the various options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html .

Regarding the interaction of the form components, you need to set the binding if you want to use the form layout or switch to the hbox / vbox setup type with various floppy settings.

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

Assuming you have a panel named "panel" with a built-in automatic size (for example, height: "100%" ). Otherwise, the new window width and height are passed to the anonymous function passed to onWindowResize() .

+12
source

As @deniztt writes, you must subscribe to the EventManager class onWindows Resize Event.

It could be something like this:

 Ext.EventManager.onWindowResize(function () { var width = Ext.getBody().getViewSize().width - 160; var height = Ext.getBody().getViewSize().height - 140; panel.setSize(width, height); });

Where does the panel link to your panel

You can read about it here .

+3
source

You can set the size for the window and set the attributes of the child panel autoHeight and autoWidth true. Another way is to catch the resize event of the window and resize the child panel to fit the new size values.

0
source

Thanks to Gegory and Joseph for EventManager solution. I made some minor changes to this solution, replacing getBody () with a DIV and setting the initial width / height of my chart (or any other component):

 <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); }); });

autoWidth and autoHeight don't seem to work for me (Ext-JS 4.2.1).

0
source

More articles:


All Articles