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

you should use the "visibility" property of the element. The trick is that even invisible elements takes up space on the page.

object.style.visibility="hidden"

Answer 2

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

Answer 3

[New answer so I can format code]

One approach would be to make your outer layout something more designed to do what you want, like say a BorderLayout with a north (your top fields) and center (the html editor). That way the html editor could simply be anchored to 100% the height of its container (the center region). In that case, since the layout would be properly managed, my previous doLayout() advice should work.

If you really want to manage the fields outside of a layout that will help you do so, then it will be up to you to manage the heights manually. Modifying the anchor property is one way to go. The way I have done it in the past (and is more preferrable) is to listen to an appropriate event and set the size of components as needed. So for example, you might add a resize listener to the window:

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

Using your test code, this gets you pretty close. However, in real code you'd want to actually get the heights from your existing visible components and subtract that number rather than hard-code it, but you get the idea. One way to make this approach easier is to add your top fields to a separate Panel that is autoHeight:true, then after showing or hiding fields, simply measure the height of that Panel and subtract it from the window height (plus margins/padding) to get your html editor height (that's what I've done in the past when I couldn't rely on a layout to manage it).

As you can see, there are many ways to skin this cat, so you can choose the approach that best suits you.

Answer 4

use autoHeight:true and the window resizes to fit the container.

Answer 5

hi! try putting this ( Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); ) inside the window's 'afterlayout' event and adding a condition there...

like this:

'afterlayout': function() {

{

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

}

}

hope this helps!