Auto-size Ext JS Window based on content, up to maxHeight

Question

Using Ext JS 4.0.2, I'm trying to open a window that automatically sizes itself big enough to fit its content, until it hits a height limit, at which point it stops getting bigger and shows a scroll bar.

Here's what I'm doing

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

When the window is first rendered, it's sized big enough for the really big content--bigger than the maxHeight should allow. If I attempt to resize it, then snaps down to the maxHeight of 300px.

How do I constrain the window to its maxHeight when it's initially rendered?

score 9 · Accepted Answer · edited Mar 02 '18 at 11:09

9

I have exactly the same problem and for now I'm doing a litle dirty hack :)

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

Depending on the content of the window, you must use the afterlayout event. Instead of using this.maxHeight, to use the whole viewport, use Ext.getBody().getViewSize().height or in vanilla JS use window.innerHeight.

This version will work even if the windows contains other components and not only huge html:

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

edited Mar 02 '18 at 11:09

Lorenz Meyer

19,166
22
75
121

answered Dec 15 '11 at 10:40

Ivan Novakov

130
1
4

1

It looks like a setSize(null, null) does the job. – Drasill Feb 28 '14 at 15:34
@Drasill `setSize(null, null)` does not work if the window does contain other components instead of simply html. – Lorenz Meyer Mar 14 '16 at 14:37

score 2 · Answer 2 · answered Dec 07 '15 at 19:58

2

This can be better :

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

answered Dec 07 '15 at 19:58

Mounirsky

117
7

score 1 · Answer 3 · answered Dec 15 '11 at 19:42

I don't see an out-of-the-box way to do this. However, you might try this approach:

Place the contents of the window into a container inside the window (i.e. make someReallyBigContent be inside a container.) On afterrender, get the height of that inner container and then proceed to set the height of the outer window based on that.

score 1 · Answer 4 · edited Jun 15 '23 at 21:16

How I ended up displaying a window with an unknown amount of fields on a form (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
        }
    }
});

score 0 · Answer 5 · edited May 23 '17 at 11:53

This is just like Ivan Novakov answer, except I prefer it when you override the onRender class for these types of classes.

This is for a couple of reasons. Removes an additional event listener, and in the case you have multiple things that need to occur at afterrender time. You can control the synchronization of these tasks.

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

score 0 · Answer 6 · answered Mar 18 '15 at 12:08

0

I had the little bit different problem. In my case ExtJS code there inside the HTML popup windows. And I had to achieve:
change the size of panel when we change the size of popup windows. Ivan Novakov's solution worked for me.

Ext.EventManager.onWindowResize(function () {

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

});

answered Mar 18 '15 at 12:08

Binod Suman

61
2

1

Welcome to Stack Overflow! This is really a comment and **not** an answer to the original question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – DavidPostill Mar 18 '15 at 12:13

score 0 · Answer 7 · answered Jul 08 '11 at 23:43

0

You can add this config on your window

maximizable: true

if you want you could programmatically 'click' that button :)

answered Jul 08 '11 at 23:43

dbrin

15,525
4
56
83

Thanks. That's an interesting solution. I'd have to "click" the maximize button twice in this case: Once to maximize, then again to restore. And then I'd have to deal with the side-effect of having a maximize button that I may not have wanted. If I were to programmatically work around this issue, then something like `win.setHeight(win.maxHeight);` would be a little more straightforward. – Mike M. Lin Jul 12 '11 at 17:31

score 0 · Answer 8 · answered Jul 18 '11 at 06:35

0

Now I see what you are trying to do. I think the only thing missing from your config is the height parameter. Set it to the same number as maxheight. That should do it, you won't need to call setHeight().

answered Jul 18 '11 at 06:35

dbrin

15,525
4
56
83

That works if the content is always too big. But what if sometimes it's smaller, and doesn't need the full height. In that case, I'd like the window to "shrink to fit". – Mike M. Lin Jul 21 '11 at 05:36

Auto-size Ext JS Window based on content, up to maxHeight

8 Answers8