ExtJS: dynamically customizable layout after adding / removing form fields

Question

I have a form layout with some TextField elements and one HtmlEditor element. Some TextField elements are "hidden", that is, they can be hidden or shown. After hiding / showing the layout elements of an instance of HtmlEditor, an empty space appears or the element does not end at the border of the window.

Can I tell the HtmlEditor instance to use all the remaining free space? Even if some elements are hidden / shown.

I tried using the property anchor, but it works well until some element is removed from the layout.

Update Here is a sample code:

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

, "click", , htmleditor.

Answer 1

/ , Container.doLayout(), .

[EDIT]: , Ext <= 3.x. 4.x . , .

Answer 2

[ , ]

, , , , , BorderLayout ( ) (html-). , html 100% ( ). , , doLayout() .

, , . - . , ( ), - . , , :

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

, . , - , . - , autoHeight: true, ( /) html ( , , , ).

, , .

Answer 3

autoHeight:true, .

Answer 4

Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); afterlayout ...

:

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

, !

Answer 5

you must use the element's "visibility" property. The trick is that even invisible elements take up space on the page.

object.style.visibility="hidden"