extjs panel resize while window resizes

Question

I have a panel with a "form" layout, containing several buttons. now I want to enable this panel resize according to window resizing. How can I get this done?

thanks.

Answer 1

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

Assuming you have a Panel named 'panel' with some automatic sizing built in (e.g. height: "100%"). Otherwise, the new width and height of the window are passed into the anonymous function passed to onWindowResize().

Answer 2

As wrote @deniztt you should subscribe to EventManager class onWindows Resize Event.

It can 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 panel is reference to your panel

You can read about it here.

Answer 3

You can make the panel resizable 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.

As far as how the form components interact you'll need to set anchor's if you want to use a form layout or switch to an hbox/vbox type of set-up with various flex settings.

Answer 4

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

Answer 5

Thanks to Gegory and Joseph for the EventManager solution. I've done some minor changes to this solution, replacing the getBody() with a DIV and setting an 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).