ExtJS: dynamicznie dopasowuje układ po dodaniu/usunięciu pól formularza

Question

Mam układ formularza z elementami TextField i jednym elementem HtmlEditor. Niektóre elementy TextField są "chowane", to znaczy mogą być ukryte lub pokazane. Po ukryciu/wyświetleniu elementów układ łamania instancji HtmlEditor - pojawia się pusta przestrzeń lub element nie kończy się na granicy okna.

Czy możliwe jest poinformowanie instancji HtmlEditor o użyciu pozostałego wolnego miejsca? Nawet w przypadku, gdy niektóre elementy są ukryte/pokazane.

Próbowałem użyć właściwości anchor, ale działa dobrze, dopóki jakiś element nie zostanie usunięty z układu.

Updated Oto przykładowy kod:

var htmlEditor = new Ext.form.HtmlEditor({ 
    anchor: '100% -54', 
    hideLabel: true 
}); 

var fp = new Ext.form.FormPanel({ 
    items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, 
      {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'}, 
     htmlEditor] 
}); 

var w = new Ext.Window({layout: 'fit', 
    height: 400, width: 600, 
    tbar: [{text: 'click', 
     handler: function() { 
      // hide element 
      Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 
      w.doLayout(); 
     } 
     }], 
    items: fp 
}); 

w.show(); 

Execute, kliknij przycisk na pasku narzędzi "click", jedno pole powinno zniknąć, a następnie spojrzeć na pustej przestrzeni poniżej HTMLEditor.

Answer 1

należy użyć właściwości "widoczności" elementu. Sztuczka polega na tym, że nawet niewidoczne elementy zajmują miejsce na stronie.

object.style.visibility="hidden" 

Answer 2

Podczas dodawania/usuwania składników z pojemnika, trzeba zadzwonić Container.doLayout(), aby mieć go przeliczyć wymiary.

[EDYCJA]: Należy pamiętać, że dotyczy to tylko Ext < = 3.x. W wersji 4.x układ zarządza tym systemem. Chociaż metoda wciąż istnieje, nigdy nie powinieneś jej używać.

Answer 3

[Nowa odpowiedź więc mogę sformatować kod]

Jedno podejście byłoby dokonać zewnętrzną coś układ bardziej przeznaczony do tego, co chcesz, jak powiedzieć BorderLayout z północy (Twój top pól) i centrum (edytor html). W ten sposób edytor html mógłby po prostu zostać zakotwiczony do 100% wysokości swojego kontenera (centrum regionu). W takim przypadku, ponieważ układ będzie prawidłowo zarządzany, moja poprzednia instrukcja doLayout() powinna działać.

Jeśli naprawdę chcesz zarządzać polami poza układem, który ci to pomoże, od ciebie zależy, czy będziesz zarządzał wysokościami ręcznie. Modyfikowanie właściwości kotwicy jest jednym ze sposobów na przejście. Sposób, w jaki robiłem to w przeszłości (i jest bardziej preferowany) polega na słuchaniu odpowiedniego zdarzenia i określaniu rozmiaru komponentów w razie potrzeby. Na przykład do okna możesz dodać odbiornik o zmianie rozmiaru:

listeners: { 
     'resize': function(){ 
      Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110); 
     } 
    } 

To sprawia, że ​​jesteś blisko. Jednak w prawdziwym kodzie, chcesz uzyskać wysokość z istniejących widocznych komponentów i odjąć tę liczbę, zamiast ją zakodować, ale masz pomysł. Jednym ze sposobów na ułatwienie tego podejścia jest dodanie górnych pól do osobnego panelu, który jest autoHeight: true, następnie po wyświetleniu lub ukryciu pól, po prostu zmierz wysokość tego panelu i odejmij go od wysokości okna (plus marginesy/dopełnienie) aby uzyskać wzrost edytora html (to było to, co robiłem w przeszłości, kiedy nie mogłem polegać na układzie, aby nim zarządzać).

Jak widać, istnieje wiele sposobów na skórze tego kota, dzięki czemu można wybrać podejście, które najbardziej Ci odpowiada.

Answer 4

użyć autoHeight:true i okno zmienia rozmiar, aby dopasować do pojemnika.

Answer 5

spróbować umieścić tę Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); wewnątrz okna afterlayout imprezy i dodanie warunku tam ...

tak:

'afterlayout': function() { 
    <condition> { 
     Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 
    } 
} 

nadzieję, że to pomaga!