ExtJS: dynamically ajust layout after adding/removing some form fields

Question

I have form layout with some TextField elements and one HtmlEditor element. Some TextField elements are "hideable", i.e. could be hid or showed. After hiding/showing elements HtmlEditor instance break layout — there appear empty space or element doesn't end at the window border.

Is it possible to tell to HtmlEditor instance use all remaining available space? Even in case when some elements are hidden/showed.

I've tried to use anchor property, but it works well until some element removed from the layout.

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

Execute, click toolbar button "click", one field should disappear, then look at empty space below htmleditor.

Answer 1

When you add/remove components from a container, you have to call Container.doLayout() to have it recalculate dimensions.

[EDIT]: Note that this applies only to Ext <= 3.x. In 4.x the layout system manages this for you. Although the method is still there, you should never have to use it.