ExtJS -=- Show / Hide Textfield in FormPanel

Hi!

As you surely knows, with ExtJS the hide() / show() methods on a field only hide / show the textfield but the label isn't hidden. To do that, you must override the Ext.form.Field component to add some new functionnalities. Here's the code to put outside the Ext.onReady.

/**
 * Overrides the Ext.form.Field to add some functionalities 
 * @author Yann Laviolette
 *
 */
Ext.override(Ext.form.Field, {
    /**
     * Show the container including the label
     */
    showContainer: function() {
        this.enable();
        this.show();

        if (!Ext.isEmpty(this.getEl())) {
            this.getEl().up('.x-form-item').setDisplayed(true); // show entire container and children (including label if applicable)
        }


    },

    /**
     * Hide the container including the label
     */
    hideContainer: function() {
        this.disable(); // for validation
        this.hide();

        if (!Ext.isEmpty(this.getEl())) {
            this.getEl().up('.x-form-item').setDisplayed(false); // hide container and children (including label if applicable)
        }
    },

    /**
     * Hide / Show the container including the label
     * @param visible
     */
    setContainerVisible: function(visible) {
        if (this.rendered) {
            if (visible) {
                this.showContainer();
            } else {
                this.hideContainer();
            }
        }

        return this;
    }

}); 

After, you can use show / hide fields by simply call myField.setContainerVisible(true) to show the component and myField.setContainerVisible(false) to hide it.