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.

Solution 1

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.

Solution 2

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().

Solution 3

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.

Comments

[codekoala]

Perfect for what I wanted. Thanks!

[fraber]

autoWidth and autoHeight don't seem to work in a chart context. I'm not sure if I'm doing something wrong or if there is a bug.

[MarthyM]

Thank you. This post helped me with a completely different problem.

[avn]

This is the solution I was looking for! I had to resize a window, so I simply passed the anonymous functions height and width to the setSize function. window.setSize(w, h)

[ccallendar]

In ExtJS 6 EventManager is deprecated, so use the Ext.GlobalEvents instead: Ext.GlobalEvents.on('resize', function(w, h) { ... });