ExtJS面板在窗口调整大小时如何调整大小

Question

我有一个使用"form"布局的面板，其中包含多个按钮。现在我想让这个面板能够根据窗口大小进行自动调整。我该如何实现这个功能呢？

谢谢。

- Simon

Answer 1

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

假设您有一个名为'panel'的面板，其中内置了一些自动调整大小的功能（例如height： "100%"）。否则，窗口的新宽度和高度将传递到传递给onWindowResize()的匿名函数中。

- dinesy

---

谢谢。这篇文章帮助了我解决一个完全不同的问题。 - MarthyM

这就是我一直在寻找的解决方案！我需要调整窗口大小，所以我只需将匿名函数的高度和宽度传递给setSize函数即可。window.setSize(w, h) - avn

在ExtJS 6中，EventManager已经被弃用，所以请改用Ext.GlobalEvents：Ext.GlobalEvents.on('resize', function(w, h) { ... }); - ccallendar

Answer 2

如@deniztt所述，您需要订阅Windows调整大小事件的EventManager类。

可以像这样：

Ext.EventManager.onWindowResize(function () {

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

    panel.setSize(width, height);

});

panel是指您的面板的引用

您可以在这里了解更多信息。

- Gregory Nozik

---

非常适合我想要的。谢谢！ - codekoala

Answer 3

您可以通过设置“resizable”配置选项使面板可调整大小，请参阅文档以了解各种选项：http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html。

至于表单组件如何交互，您需要设置锚点（anchor）来使用表单布局，或者切换到具有不同flex设置的hbox/vbox类型的设置。

- joekrell

Answer 4

您可以设置窗口的大小，并将子面板的autoHeight和autoWidth属性设置为true。另一种方法是捕获窗口的resize事件，并根据新的大小值调整子面板的大小。

- Deniz

---

autoWidth和autoHeight在图表上下文中似乎不起作用。我不确定是我做错了什么还是有bug。 - fraber

Answer 5

感谢Gegory和Joseph提供的EventManager解决方案。我对这个解决方案进行了一些小的修改，用DIV替换了getBody()并设置了我的图表（或任何其他组件）的初始宽度/高度：

<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 和 autoHeight 在我的情况下似乎无法正常工作（Ext-JS 4.2.1）。

- fraber