extjs panel resize while window resizes

问题

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.

回答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.

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

回答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.

回答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.

回答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).

来源：https://stackoverflow.com/questions/5885868/extjs-panel-resize-while-window-resizes

标签

extjs

resize

panel