基于内容自动调整Ext JS Window，最大可达maxHeight

Posted 2021-05-06

使用Ext JS 4.0.2，我试图打开一个窗口，自动调整大小以适应其内容，直到达到高度限制，此时它会停止变大并显示滚动条。

这就是我正在做的事情

Ext.create('widget.window', {
    maxHeight: 300,
    width: 250,
    html: someReallyBigContent,
    autoScroll: true,
    autoShow: true
});

首次渲染窗口时，它的大小足以容纳真正大的内容 - 大于maxHeight应允许的内容。如果我尝试调整它的大小，然后快速向下移动到300px的maxHeight。

如何在最初渲染窗口时将窗口限制为maxHeight？

答案

我有完全相同的问题，现在我做了一点点肮脏的黑客:)

this.on('afterrender', function() {
    if (this.getHeight() > this.maxHeight) {
        this.setHeight(this.maxHeight);
    }
    this.center();
}, this);

根据窗口的内容，您必须使用afterlayout事件。而不是使用this.maxHeight，使用整个视口，使用Ext.getBody().getViewSize().height或在香草JS使用window.innerHeight。

即使窗口包含其他组件而不仅仅是巨大的html，此版本仍然有效：

listeners: {afterlayout: function() {
    var height = Ext.getBody().getViewSize().height;
    if (this.getHeight() > height) {
        this.setHeight(height);
    }
    this.center();
}}

另一答案

我没有看到开箱即用的方法。但是，您可以尝试这种方法：

将窗口内容放入窗口内的容器中（即将someReallyBigContent放在容器内。）在afterrender上，获取该内部容器的高度，然后根据该值继续设置外窗口的高度。

另一答案

我最后是如何在窗体上显示一个包含未知字段数量的窗口（constrain = body.el）：

prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
    layout : {
        type : 'vbox',
        align : 'center'
    },
    buttons : buttons,
    maxHeight : constrain.dom.clientHeight - 50,
    title : title,
    items : prefForm,
    listeners : {
        afterrender : {
            fn : function(win) {
                var f = win.down('#prefForm');
                f.doLayout();
                var h = f.body.dom.scrollHeight;
                if (f.getHeight() > h)
                    h = f.getHeight();
                win.setHeight(h + 61);
                win.center();
            },
            single : true
        }
    }
});

另一答案

这可能会更好：

bodyStyle: { maxHeight: '100px' }, autoScroll: true,

另一答案

您可以在窗口中添加此配置

maximizable: true

如果你想要你可以编程'点击'那个按钮:)

另一答案

现在我明白你要做什么了。我认为配置中唯一缺少的是height参数。将其设置为与maxheight相同的数字。应该这样做，你不需要调用setHeight（）。

另一答案

这就像Ivan Novakov的回答一样，除非我为这些类型的类覆盖onRender类时更喜欢它。

这有几个原因。删除其他事件侦听器，如果您有多个事情需要在Afterrender时间发生。您可以控制这些任务的同步。

onRender: function(ct,pos) {
    //Call superclass
    this.callParent(arguments);
    if (this.getHeight() > this.maxHeight) {
        this.setHeight(this.maxHeight);
    }
    this.center();
}

另一答案

我有一点点不同的问题。在我的案例中，ExtJS代码位于HTML弹出窗口内。我必须实现： 当我们改变弹出窗口的大小时，改变面板的大小。 Ivan Novakov的解决方案适合我。

Ext.EventManager.onWindowResize(function () {

       var width = Ext.getBody().getViewSize().width - 20;
       var height = Ext.getBody().getViewSize().height - 20;
        myPanel.setSize(width, height);

});