ExtJS: layout dinamicamente corretto dopo l'aggiunta/rimozione di alcuni campi modulo

Question

Ho il layout del modulo con alcuni elementi TextField e un elemento HtmlEditor. Alcuni elementi di TextField sono "nascondibili", ovvero potrebbero essere nascosti o mostrati. Dopo aver nascosto/mostrato gli elementi HtmlEditor interrompe il layout - appare spazio vuoto o l'elemento non finisce sul bordo della finestra.

È possibile dire all'istanza di HtmlEditor di utilizzare tutto lo spazio rimanente disponibile? Anche nel caso in cui alcuni elementi siano nascosti/mostrati.

Ho provato a usare la proprietà anchor, ma funziona bene fino a quando alcuni elementi non vengono rimossi dal layout.

Aggiornato Ecco un esempio di codice:

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, fare clic sul pulsante della barra degli strumenti "click", un campo dovrebbe sparire, poi guardare spazio vuoto sotto HTMLEditor.

Answer 1

si dovrebbe usare la proprietà "visibilità" dell'elemento. Il trucco è che anche gli elementi invisibili occupano spazio sulla pagina.

object.style.visibility="hidden" 

Answer 2

Quando si aggiunge/rimuovere i componenti da un contenitore, bisogna chiamare Container.doLayout() per averlo ricalcolare le dimensioni.

[EDIT]: si noti che questo si applica solo a Ext < = 3.x. In 4.x il sistema di layout gestisce questo per te. Anche se il metodo è ancora lì, non dovresti mai usarlo.

Answer 3

[Nuova risposta così posso formattare il codice]

Un approccio potrebbe essere quello di rendere il vostro qualcosa di layout esterno più progettato per fare ciò che si vuole, come dire una BorderLayout con un nord (i campi in alto) e il centro (l'editor html). In questo modo l'editor html potrebbe semplicemente essere ancorato al 100% dell'altezza del suo contenitore (la regione centrale). In tal caso, poiché il layout sarebbe gestito correttamente, il mio precedente consiglio su doLayout() dovrebbe funzionare.

Se si vuole veramente gestire i campi al di fuori di un layout che ti aiuterà a farlo, allora spetterà a te gestire le altezze manualmente. La modifica della proprietà di ancoraggio è un modo per andare. Il modo in cui l'ho fatto in passato (ed è più preferibile) è ascoltare un evento appropriato e impostare la dimensione dei componenti secondo necessità. Così, per esempio, si potrebbe aggiungere un listener di ridimensionamento alla finestra:

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

Utilizzando il codice di prova, questo si ottiene abbastanza vicino. Tuttavia, nel codice reale si vorrebbe effettivamente ottenere le altezze dai componenti visibili esistenti e sottrarre quel numero piuttosto che codificarlo, ma si ottiene l'idea. Un modo per semplificare questo approccio è quello di aggiungere i campi superiori a un pannello separato che è autoHeight: true, quindi dopo aver mostrato o nascosto i campi, basta misurare l'altezza di quel pannello e sottrarlo dall'altezza della finestra (più margini/riempimento) per ottenere l'altezza del tuo html editor (è quello che ho fatto in passato quando non potevo contare su un layout per gestirlo).

Come potete vedere, ci sono molti modi per scuoiare questo gatto, in modo da poter scegliere l'approccio più adatto a voi.

Answer 4

utilizzare autoHeight:true e la finestra si ridimensiona per adattarsi al contenitore.

Answer 5

provare a mettere questo Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); all'interno evento della finestra afterlayout e l'aggiunta di una condizione non ci ...

come questo:

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

speranza che questo aiuti!