Авторазмер Ext JS Window на основе содержимого, вплоть до maxHeight

Question

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

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

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

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

Как мне ограничить окно значением 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 или в vanilla JS используйте window.innerHeight.

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

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

Answer 2

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

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

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

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

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

Answer 5

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

Ext.EventManager.onWindowResize(function () {

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

});

Answer 6

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

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

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

Answer 7

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

Answer 8

Вы можете добавить этот конфиг в вашем окне

maximizable: true

если вы хотите, вы можете программно «нажать» на эту кнопку:)