Auto-size Ext JS Window на основе контента, до maxHeight

Используя Ext JS 4.0.2, я пытаюсь открыть окно, которое автоматически само по себе будет достаточно большим, чтобы соответствовать его содержимому, пока оно не достигнет предела высоты, и в этот момент оно перестает увеличиваться и показывает полосу прокрутки.

Вот что я делаю

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

Когда окно сначала отображается, оно имеет размер, достаточно большой для действительно большого контента - больше, чем maxHeight. Если я попытаюсь изменить размер, то снизу до maxHeight 300px.

Как я могу ограничить окно его maxHeight, когда оно первоначально отображалось?

Ответ 1

У меня точно такая же проблема, и теперь я делаю грязный взлом litle:)

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

В зависимости от содержимого окна вы должны использовать событие afterlayout. Вместо использования this.maxHeight, чтобы использовать весь видовой экран, используйте Ext.getBody().getViewSize().height или в vanille JS используйте window.innerHeight.

Эта версия будет работать, даже если окна содержат другие компоненты и не только огромный html:

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

Ответ 2

Я не вижу готового способа сделать это. Однако вы можете попробовать этот подход:

Поместите содержимое окна в контейнер внутри окна (т.е. сделайте someReallyBigContent внутри контейнера.) На afterrender, получите высоту этого внутреннего контейнера, а затем перейдите к настройке высоты внешнего окна на основе что.

Ответ 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
        }
    }
});

Ответ 4

Это может быть лучше:

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

Ответ 5

Вы можете добавить эту конфигурацию в свое окно

maximizable: true

если вы хотите программно 'click' эту кнопку:)

Ответ 6

Теперь я вижу, что вы пытаетесь сделать. Я думаю, что единственное, что отсутствует в вашем конфиге, - это параметр высоты. Установите его на тот же номер, что и maxheight. Это должно сделать это, вам не нужно будет звонить setHeight().

Ответ 7

Это похоже на Иван Новаков, за исключением того, что я предпочитаю это, когда вы переопределяете класс onRender для этих типов классов.

Это по нескольким причинам. Удаляет дополнительный прослушиватель событий, и в случае, если у вас есть несколько вещей, которые должны произойти в момент времени выполнения. Вы можете контролировать синхронизацию этих задач.

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

Ответ 8

У меня была немного другая проблема. В моем случае код ExtJS присутствует внутри всплывающих окон HTML. И я должен был добиться:
измените размер панели, когда мы изменим размер всплывающих окон. Решение Иванова Новакова работало для меня.

Ext.EventManager.onWindowResize(function () {

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

});