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

Question

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

这就是我正在做的事情

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

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

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

Answer 1

我有完全相同的问题,现在我正在做一个肮脏的黑客:)

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

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

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

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