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?

Answer 1

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();
}}