ExtJS: dynamisch Layout nach dem Hinzufügen/Entfernen einiger Formularfelder

Question

Ich habe Formularlayout mit einigen TextField-Elementen und einem HtmlEditor-Element. Einige TextField-Elemente sind "verdeckt", d. H. Könnten versteckt oder angezeigt werden. Nach dem Verstecken/Anzeigen von Elementen HtmlEditor Instanz-Layout zu brechen - dort erscheint leerer Raum oder Element endet nicht am Fensterrand.

Ist es möglich, der HtmlEditor-Instanz den verbleibenden verfügbaren Speicherplatz mitzuteilen? Auch wenn einige Elemente ausgeblendet sind.

Ich habe versucht, anchor Eigenschaft zu verwenden, aber es funktioniert gut, bis einige Elemente aus dem Layout entfernt.

Aktualisiert Hier ist ein Beispielcode:

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(); 

ausführen, Symbolleiste auf die Schaltfläche klicken „Klick“, sollte ein Feld verschwinden, bei leeren Raum unter Htmleditor schauen dann.

Answer 1

sollten Sie die Eigenschaft "Sichtbarkeit" des Elements verwenden. Der Trick besteht darin, dass sogar unsichtbare Elemente Platz auf der Seite einnehmen.

object.style.visibility="hidden" 

Answer 2

Wenn Sie Komponenten aus einem Behälter hinzufügen/entfernen, müssen Sie Container.doLayout() aufrufen es Dimensionen neu berechnen lassen.

[EDIT]: Beachten Sie, dass dies nur für Ext < = 3.x gilt. In 4.x verwaltet das Layoutsystem dies für Sie. Obwohl die Methode immer noch vorhanden ist, sollten Sie sie nie verwenden.

Answer 3

[Neue Antwort, so kann ich formatieren Code]

Ein Ansatz wäre, um Ihre äußere Layout etwas zu gestalten zu tun, was Sie wollen, wie sagen ein Border mit einem Nord (Ihr Top-Feldern) und Zentrum (der HTML-Editor). Auf diese Weise könnte der HTML-Editor einfach auf 100% der Höhe seines Containers (der mittleren Region) verankert werden. In diesem Fall sollte mein vorheriger doLayout() - Hinweis funktionieren, da das Layout ordnungsgemäß verwaltet wird.

Wenn Sie wirklich die Felder außerhalb eines Layouts verwalten möchten, die Ihnen dabei helfen, dann liegt es an Ihnen, die Höhen manuell zu verwalten. Das Ändern der Ankereigenschaft ist eine Möglichkeit. Die Art und Weise, wie ich es in der Vergangenheit gemacht habe (und besser ist), besteht darin, ein passendes Ereignis anzuhören und die Größe der Komponenten nach Bedarf festzulegen. So zum Beispiel, könnten Sie einen Resize-Hörer zum Fenster hinzufügen:

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

Ihren Testcode verwenden, diese bekommt man ziemlich nah dran. In echtem Code möchten Sie jedoch tatsächlich die Höhen Ihrer vorhandenen sichtbaren Komponenten ermitteln und diese Zahl subtrahieren, anstatt sie hart zu codieren, aber Sie erhalten die Idee. Eine Möglichkeit, diesen Ansatz zu vereinfachen, besteht darin, die obersten Felder zu einem separaten Feld mit der Option autoHeight: true hinzuzufügen und dann nach dem Ein- oder Ausblenden von Feldern die Höhe dieses Felds zu messen und diese von der Fensterhöhe (plus Ränder/Abstand) zu subtrahieren. um die HTML-Editor-Höhe zu erreichen (das habe ich in der Vergangenheit gemacht, als ich mich nicht auf ein Layout verlassen konnte, um es zu verwalten).

Wie Sie sehen können, gibt es viele Möglichkeiten, diese Katze zu häuten, so dass Sie den Ansatz wählen können, der am besten zu Ihnen passt.

Answer 4

Verwenden Sie autoHeight:true und das Fenster passt sich an den Container an.

Answer 5

versuchen diese Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); innerhalb der afterlayout Veranstaltung Fenster setzen und einen Zustand gibt das Hinzufügen ...

wie folgt aus:

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

hoffe, das hilft!