Auto-rozmiar okna Ext JS na podstawie treści, do maxheight

Question

Korzystanie Ext JS 4.0.2, próbuję otworzyć okno, które automatycznie rozmiary sama wystarczająco duże, aby dopasować swoją zawartość, dopóki nie natrafi limit wysokości, w co oznacza, że ​​przestaje się powiększać i pokazuje pasek przewijania.

Oto co robię

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

Kiedy okno jest najpierw renderowane, to wielkości wystarczająco duży dla bardzo dużej zawartości - większy niż maxheight powinno pozwolić. Jeśli spróbuję zmienić jego rozmiar, wówczas przyciąga do maksimum o wartości 300 pikseli.

Jak mogę ograniczyć okno do jego maxheight kiedy to pierwotnie wydanego?

Answer 1

Mam dokładnie ten sam problem i teraz robię litle brudną siekać :)

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

zależności od zawartości okna, należy użyć zdarzenia afterlayout. Zamiast używać this.maxHeight, aby korzystać z całej rzutni, należy Ext.getBody().getViewSize().height lub w waniliowym użycia JS window.innerHeight.

Ta wersja będzie działać, nawet jeśli okna zawiera inne składniki, a nie tylko ogromny html:

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

Answer 2

Możesz dodać ten config na okna

maximizable: true 

jeśli chcesz można programowo „click”, który przycisk :)

Answer 3

Teraz widzę, co chce zrobić. Myślę, że jedyną rzeczą, której brakuje w twojej konfiguracji, jest parametr wysokości. Ustaw go na taki sam numer, jak maksimum. To powinno wystarczyć, nie będziesz musiał wywoływać setHeight().

Answer 4

ja nie widzę sposób to zrobić out-of-the-box. Możesz jednak wypróbować takie podejście:

Umieść zawartość okna w pojemniku wewnątrz okna (np. W pojemniku umieść trochę ReallyBigContent). Na afterrender, uzyskaj wysokość tego wewnętrznego pojemnika, a następnie przystąp do ustawienia wysokość zewnętrznego okienka w oparciu o to.

Answer 5

Jak skończyło się wyświetlając okno z nieznaną ilość pól na formularzu (ograniczyć = 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 6

To tak jak Ivan Novakov odpowiedź, z wyjątkiem Wolę, kiedy przesłonić klasa onRender dla tego typu klas.

To jest dla kilku powodów. Usuwa dodatkowy detektor zdarzeń, a także w przypadku wielu rzeczy, które muszą wystąpić w czasie Afterrender. Możesz kontrolować synchronizację tych zadań.

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

Answer 7

Miałem trochę inny problem. W moim przypadku kod ExtJS tam w oknach podręcznych HTML. I musiałem osiągnąć:
zmienić rozmiar panelu, kiedy zmiany rozmiaru okna wyskakujące. Rozwiązanie Ivan Novakov zadziałało dla mnie.

Ext.EventManager.onWindowResize(function() { 

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

}); 

Answer 8

To może być lepiej:

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