Pages

Friday, April 23, 2010

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.

7 comments:

  1. Hi, thanks for code!

    Exts documentation explain that it isn´t a bug (and it´s true), but in 90% of cases, hide label when hiding a textField is needed.

    Thanks again.

    ReplyDelete
  2. Great post!
    It's helped a lot!
    Thank you!

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. /**
    * Overrides the Ext.form.Field to add some functionalities
    */
    Ext.override(Ext.form.Field, {
    /**
    * Show the container including the label
    */
    showContainer: function () {
    this.enable();
    this.show();
    this.hidden = false;

    if (!Ext.isEmpty(this.getEl())) {
    this.getEl().up('').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();
    this.hidden = true;

    if (!Ext.isEmpty(this.getEl())) {
    this.getEl().up('').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;
    },

    /**
    * Toggle containers including the label
    */
    toggleContainerVisibilityWith: function (container) {
    if (this.rendered) {
    if (this.hidden) {
    this.showContainer();
    container.hideContainer();
    } else {
    this.hideContainer();
    container.showContainer();
    }
    }
    return this;
    }
    });

    I've changed your code and added toggleContainerVisibilityWith() function

    ReplyDelete