根据内容自动调整ExtJS窗口大小,最高可达maxHeight

esyap4oy  于 2023-06-22  发布在  其他
关注(0)|答案(8)|浏览(196)

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

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

当窗口第一次呈现时,它的大小足以容纳真正的大内容--大于maxHeight所允许的大小。如果我试图调整它的大小,然后捕捉到300 px的maxHeight。

如何在最初渲染时将窗口约束为maxHeight?

bsxbgnwa

bsxbgnwa1#

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

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

根据窗口的内容,您必须使用afterlayout事件。要使用整个viewport,使用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();
}}
vlju58qv

vlju58qv2#

这样可以更好:

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

vvppvyoh3#

我看不出一个开箱即用的方法来做这个。但是,您可以尝试这种方法:
将窗口的内容放入窗口内的容器中(即在afterrender上,获取内部容器的高度,然后根据它设置外部窗口的高度。

qojgxg4l

qojgxg4l4#

我是如何在窗体上显示一个窗口的字段数量未知(constraint = 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
        }
    }
});
fcg9iug3

fcg9iug35#

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

maximizable: true

如果需要,可以编程地“单击”按钮:)

1tu0hz3e

1tu0hz3e6#

现在我知道你想干什么了。我认为你的配置中唯一缺少的就是height参数。将其设置为与maxheight相同的数字。这样就可以了,你不需要调用setHeight()。

vaqhlq81

vaqhlq817#

这就像Ivan Novakov answer一样,只是我更喜欢在为这些类型的类覆盖onRender类时使用它。
这有几个原因。移除一个额外的事件侦听器,如果您有多个需要在后期渲染时发生的事情。您可以控制这些任务的同步。

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

tcbh2hod8#

我有一点不同的问题。在我的情况下ExtJS代码有HTML弹出窗口。我必须做到:
当我们改变弹出窗口的大小时改变面板的大小。伊万·诺瓦科夫的解决方案对我很有效。

Ext.EventManager.onWindowResize(function () {

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

});

相关问题