ExtJS: dynamically ajust layout after adding/removing some form fields
Posted
by Sergei Stolyarov
on Stack Overflow
See other posts from Stack Overflow
or by Sergei Stolyarov
Published on 2009-11-11T12:24:25Z
Indexed on
2010/04/26
7:53 UTC
Read the original article
Hit count: 679
extjs
|JavaScript
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.
© Stack Overflow or respective owner