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: 651

Filed under:
|

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

Related posts about extjs

Related posts about JavaScript