Question

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

这就是我正在做的事情

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或者使用@ {1}}。

即使Windows包含其他组件而且不仅包含巨大的html：

，此版本也能正常工作

window.innerHeight

Answer 2

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

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

Answer 3

我最终如何在表单上显示一个包含未知数量字段的窗口（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
        }
    }
});

Answer 4

这可能更好：

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

Answer 5

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

maximizable: true

如果您希望您可以通过编程方式“点击”该按钮：）

Answer 6

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

Answer 7

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

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

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

Answer 8

我有一点不同的问题。在我的案例中，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);

});

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

8 个答案: