当前位置：文江博客话题详情

extjs 面板在窗口大小调整时调整大小

发布于 2024-11-05 05:30:07 字数 75 浏览 0 评论 0原文

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紙鸢 2024-11-12 05:30:07

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

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

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

回复收藏 0 原文

┊风居住的梦幻卍 2024-11-12 05:30:07

正如 @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);

});

其中面板是对您的面板的引用

您可以 在此处阅读。

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.

回复收藏 0 原文

红焚 2024-11-12 05:30:07

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

至于表单组件如何交互，如果您想使用表单布局或切换到具有各种弹性设置的水平盒/垂直盒类型设置，则需要设置锚点。

回复收藏 0 原文

み格子的夏天 2024-11-12 05:30:07

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

回复收藏 0 原文

小瓶盖 2024-11-12 05:30:07

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

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

回复收藏 0 原文

~没有更多了~