Question

我有一个带有“表单”布局的面板，其中包含几个按钮。现在我想根据窗口大小调整启用此面板调整大小。我怎么能这样做？

感谢。

Answer 1

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

假设您有一个名为“panel”的Panel，内置了一些自动调整大小（例如height: "100%"）。否则，窗口的新宽度和高度将传递给传递给onWindowResize()的匿名函数。

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

});

哪个小组引用您的小组

你可以read about it here。

Answer 3

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

就表单组件的交互方式而言，如果要使用表单布局或切换到具有各种弹性设置的hbox / vbox类型的设置，则需要设置锚点。

Answer 4

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

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）。

当窗口调整大小时，extjs面板调整大小

5 个答案: