How to create initially hidden field in the form layout?

Question

Is it possible to create field in form layout that's initially hidden (completely, including field label)?

I don't want to call cmp.getEl().up('.x-form-item').setDisplayed[1] for these fields after rendering because it causes flicker and other “effects”.

[1] as I know that's the only way to hide form field including label.

Answer 1

Sure, create a CSS class in your document with either (depending on your needs) 'display:none' OR 'visibility:hidden'. Call this class, say, 'invisible-class'.

Create another class with either 'display:block', 'display:inline' OR 'visibility:visible' and call this class say, 'visible-class'.

For the form field you wish to be invisible when its rendered you would set its 'cls' property to 'invisible-class', i.e.:

cls:'invisible-class'

And when you want the field to be visible, use the method:

addCls('visible-class')

ALTERNATIVELY- when you want to make the item visible use the method:

removeCls('invisible-class')

i.e. mycomponent.removeClass('invisible-class')

Hope this helps!

Answer 2

You can setup the form field's xtype to hidden. So, you'll have something like this:

{
id:'my_field_id',
name: 'my_field_name',
xtype: 'hidden'
}

You can add the field like this:

Ext.getCmp("myFormPanel").add({
    id:'my_field_id',
    name: 'my_field_name',
    xtype: 'textfield'
    });
Ext.getCmp("myFormPanel").doLayout();

And remove it like this:

Ext.getCmp("myFormPanel").remove(Ext.getCmp("my_field_id"));
Ext.getCmp("myFormPanel").doLayout();

I hope this is what you want.

Answer 3

A simpler method if you just need to hide this single field and its field label would be to create a separate label object for it. It might be easier to just hide the label instead of deal with the CSS to hide the fieldLabel.

You might be able to add a listener to the render event of the layout managing panel to do something like this...

var cmp = Ext.getCmp(fieldID);

if((cmp.hidden) && cmp.previousSibling() != null) 
   && (cmp.previousSibling().xtype =='label'){
   cmp.previousSibling().hide(); 
}