ExtJS: dynamically ajust layout after adding/removing some form fields
- by Sergei Stolyarov
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.
