Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

Thread: Hiding the combobox and the label sometime?

  1. #11
    Sencha User
    Join Date
    Apr 2007
    Posts
    57
    Vote Rating
    0
      0  

    Default

    Here is the full version... it enables you to add your own custom property to the config of a form field to set it to hide before rendering. Simply replace "xxxxxxxx" with your own hide property name:

    Code:
     Ext.override(Ext.form.Field, {
        showContainer: function() {
            this.setVisible(true);
            this.enable();
            this.getEl().up('.x-form-item').setDisplayed(true); // show entire container and children (including label if applicable)
        },
        
        hideContainer: function() {
            this.disable(); // for validation
            this.setVisible(false);        
            this.getEl().up('.x-form-item').setDisplayed(false); // hide container and children (including label if applicable)
        },
        
        setContainerVisible: function(visible) {
            if (visible) {
                this.showContainer();
            } else {
                this.hideContainer();
            }
            return this;
        }
    });
    
    Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(config) {
        if (this.xxxxxxxx == true) {
            this.hideContainer();
        }
    });
    Use it as follows:

    Code:
     var txtPasswdRetry = new Ext.form.TextField({
            fieldLabel: 'Re-enter',
            name: 'ReenterPasswd',
            allowBlank: false,
            xxxxxxxx: true,
            blankText: "This field is required",
            selectOnFocus: true,
            width: 175
    });
    You can then enable or disable as follows:

    Code:
    txtPasswdRetry.setContainerVisible(value);
    Hope this helps, as I also find it very annoying that the labels are not automatically hidden when the form fields are... grrr :-)

  2. #12
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    120
      0  

    Default

    Or you could try a different workaround which makes show(), hide(), enable() and disable() act on the label.

    Code:
    Ext.override(Ext.layout.FormLayout, {
        renderItem : function(c, position, target){
            if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
                var args = [
                       c.id, c.fieldLabel,
                       c.labelStyle||this.labelStyle||'',
                       this.elementStyle||'',
                       typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                       (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                       c.clearCls || 'x-form-clear-left' 
                ];
                if(typeof position == 'number'){
                    position = target.dom.childNodes[position] || null;
                }
                c.actionMode = 'formItem';
                if(position){
                    c.formItem = Ext.get(this.fieldTpl.insertBefore(position, args));
                }else{
                    c.formItem = Ext.get(this.fieldTpl.append(target, args));
                }
                c.render('x-form-el-'+c.id);
            }else {
                Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
            }
        }
    });

    Use this override instead.

  3. #13
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    136
    Vote Rating
    5
      0  

    Question

    Quote Originally Posted by HartlepoolLad View Post
    Here is the full version... it enables you to add your own custom property to the config of a form field to set it to hide before rendering. Simply replace "xxxxxxxx" with your own hide property name:

    Code:
     Ext.override(Ext.form.Field, {
        showContainer: function() {
            this.setVisible(true);
            this.enable();
            this.getEl().up('.x-form-item').setDisplayed(true); // show entire container and children (including label if applicable)
        },
        
        hideContainer: function() {
            this.disable(); // for validation
            this.setVisible(false);        
            this.getEl().up('.x-form-item').setDisplayed(false); // hide container and children (including label if applicable)
        },
        
        setContainerVisible: function(visible) {
            if (visible) {
                this.showContainer();
            } else {
                this.hideContainer();
            }
            return this;
        }
    });
    
    Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(config) {
        if (this.xxxxxxxx == true) {
            this.hideContainer();
        }
    });
    Use it as follows:

    Code:
     var txtPasswdRetry = new Ext.form.TextField({
            fieldLabel: 'Re-enter',
            name: 'ReenterPasswd',
            allowBlank: false,
            xxxxxxxx: true,
            blankText: "This field is required",
            selectOnFocus: true,
            width: 175
    });
    You can then enable or disable as follows:

    Code:
    txtPasswdRetry.setContainerVisible(value);
    Hope this helps, as I also find it very annoying that the labels are not automatically hidden when the form fields are... grrr :-)
    This is working great. but the formLayout in the formPanel does not adjust. The place for the field is still there. How could i resolve this ?

  4. #14
    Ext User
    Join Date
    Jun 2008
    Location
    Vietnam
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Hi nbourdeau,

    I tested your solution, it is correct to the Ext.form.TextField component but it is not correct to the Ext.form.DateField component.
    For instance, the frist time, when I want to show this Ext.form.DateField component, it worked ok, otherwise when I want to hide this Ext.form.DateField component, it raised an errors in the frist time.

    My code following :

    var dt = new Ext.form.DateField({
    fieldLabel: 'Date of Birth',
    id: 'dt',
    name: 'dt',
    width:90,
    xxxxxxxx:true,
    allowBlank:false
    });

    - If I set 'xxxxxxxx:false', it works ok.
    - If I set 'xxxxxxxx:true', it don't work and raise an error following:
    {
    Ext.form.TriggerField=Ext.extend(Ext.form.TextField,{defaultAutoCreate:{tag:"input",type:"text",size:"16",autocomplete:"off"},hideTrigger:false,autoSize:Ext.emptyFn,monitorTab:true,deferHeight:true,mimicing:false,onResize:function(A,{Ext.form.TriggerField.superclass.onResize.call(this,A,;if(typeof A=="number"){this.el.setWidth(this.adjustWidth("input",A-this.trigger.getWidth()))}this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth())},adjustSize:Ext.BoxComponent.prototype.adjustSize,getResizeEl:function(){return this.wrap},getPositionEl:function(){return this.wrap},alignErrorIcon:function(){this.errorIcon.alignTo(this.wrap,"tl-tr",[2,0])},onRender:function(B,A){Ext.form.TriggerField.superclass.onRender.call(this,B,A);this.wrap=this.el.wrap({cls:"x-form-field-wrap"});this.trigger=this.wrap.createChild(this.triggerConfig||{tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger "+this.triggerClass});if(this.hideTrigger){this.trigger.setDisplayed(false)}this.initTrigger();if(!this.width){this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth())}},initTrigger:function(){this.trigger.on("click",this.onTriggerClick,this,{preventDefault:true});this.trigger.addClassOnOver("x-form-trigger-over");this.trigger.addClassOnClick("x-form-trigger-click")},onDestroy:function(){if(this.trigger){this.trigger.removeAllListeners();this.trigger.remove()}if(this.wrap){this.wrap.remove()}Ext.form.TriggerField.superclass.onDestroy.call(this)},onFocus:function(){Ext.form.TriggerField.superclass.onFocus.call(this);if(!this.mimicing){this.wrap.addClass("x-trigger-wrap-focus");this.mimicing=true;Ext.get(Ext.isIE?document.body:document).on("mousedown",this.mimicBlur,this,{delay:10});if(this.monitorTab){this.el.on("keydown",this.checkTab,this)}}},checkTab:function(A){if(A.getKey()==A.TA{this.triggerBlur()}},onBlur:function(){},mimicBlur:function(A){if(!this.wrap.contains(A.target)&&this.validateBlur(A)){this.triggerBlur()}},triggerBlur:function(){this.mimicing=false;Ext.get(Ext.isIE?document.body:document).un("mousedown",this.mimicBlur);if(this.monitorTab){this.el.un("keydown",this.checkTab,this)}this.beforeBlur();this.wrap.removeClass("x-trigger-wrap-focus");Ext.form.TriggerField.superclass.onBlur.call(this)},beforeBlur:Ext.emptyFn,validateBlur:function(A){return true},onDisable:function(){Ext.form.TriggerField.superclass.onDisable.call(this);if(this.wrap){this.wrap.addClass("x-item-disabled")}},onEnable:function(){Ext.form.TriggerField.superclass.onEnable.call(this);if(this.wrap){this.wrap.removeClass("x-item-disabled")}},onShow:function(){if(this.wrap){this.wrap.dom.style.display="";this.wrap.dom.style.visibility="visible"}},onHide:function(){this.wrap.dom.style.display="none"},onTriggerClick:Ext.emptyFn});Ext.form.TwinTriggerField=Ext.extend(Ext.form.TriggerField,{initComponent:function(){Ext.form.TwinTriggerField.superclass.initComponent.call(this);this.triggerConfig={tag:"span",cls:"x-form-twin-triggers",cn:[{tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger "+this.trigger1Class},{tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger "+this.trigger2Class}]}},getTrigger:function(A){return this.triggers[A]},initTrigger:function(){var A=this.trigger.select(".x-form-trigger",true);this.wrap.setStyle("overflow","hidden");var B=this;A.each(function(D,F,C){D.hide=function(){var G=B.wrap.getWidth();this.dom.style.display="none";B.el.setWidth(G-B.trigger.getWidth())};D.show=function(){var G=B.wrap.getWidth();this.dom.style.display="";B.el.setWidth(G-B.trigger.getWidth())};var E="Trigger"+(C+1);if(this["hide"+E]){D.dom.style.display="none"}D.on("click",this["on"+E+"Click"],this,{preventDefault:true});D.addClassOnOver("x-form-trigger-over");D.addClassOnClick("x-form-trigger-click")},this);this.triggers=A.elements},onTrigger1Click:Ext.emptyFn,onTrigger2Click:Ext.emptyFn});Ext.reg("trigger",Ext.form.TriggerField);
    }


    Please help me to solve it.

    Thanks a lot for your help.
    lkbao

  5. #15
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    136
    Vote Rating
    5
      0  

    Default

    Hi lkbao

    First, your code is unreadable. You should post it correctly using the tags for this.
    I'v not tried the code with the datefield. So i can't help you more. But you should inspect the datefield with firebug to see if it is included the same way as other field in a .x-form-item div
    If yes, try to directly use the function on your widget :

    YOURDATEFIELD.getEl().up('.x-form-item').setDisplayed(false);

  6. #16
    Ext User
    Join Date
    Jun 2008
    Location
    Vietnam
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Hi nbourdeau,

    Following is my code

    Ext.override(Ext.form.Field, {
    showContainer: function() {
    this.setVisible(true);
    this.enable();
    this.getEl().up('.x-form-item').setDisplayed(true); // show entire container and children (including label if applicable)
    },

    hideContainer: function() {
    this.disable(); // for validation
    this.setVisible(false);
    this.startdate.getEl().up('.x-form-item').setDisplayed(false); // hide container and children (including label if applicable)
    },

    setContainerVisible: function(visible) {
    if (visible) {
    this.showContainer();
    } else {
    this.hideContainer();
    }
    return this;
    }
    });

    Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(config) {
    if (this.xxxxxxxx == true) {
    this.hideContainer();
    }
    });

    /*Declare DateField component*/
    var startDate = new Ext.form.DateField({
    id : 'startdate',
    fieldLabel: 'Start2',
    name : 'startdate',
    allowBlank: false,
    xxxxxxxx: true,
    selectOnFocus: true,
    width : 90
    });

    // make a new form
    var form = new Ext.form.FormPanel({
    border : false,
    bodyStyle : 'background-color:#f4f8f5;width:100%',
    method : 'post',
    header : false,
    items : [startDate]
    });
    form.render('settings');

    /*Declare div in HTML */
    ..........
    <div id="settings" style="padding:10px;"></div>
    ..........

    Once more time, thanks a lot for your help.
    Wishing you and your family are happy.

    Bao
    lkbao

  7. #17
    Ext User
    Join Date
    Mar 2008
    Posts
    1
    Vote Rating
    0
      0  

    Default Thanks...

    Quote Originally Posted by webpaul View Post
    Hi,

    if you want hide a field you should link on it first like this:
    var combo = form.findField('NAME OF THE COMBO');
    (form is the link to the formular of the combo)

    If you have the element you can hide this with combo.hide(); but in my knowledge there not hide the label (in 1.1, I don't know in 2.0).
    Therefore here some function:

    function hideField(field)
    {
    field.disable();// for validation
    field.hide();
    field.getEl().up('.x-form-item').setDisplayed(false); // hide label
    }

    function showField(field)
    {
    field.enable();
    field.show();
    field.getEl().up('.x-form-item').setDisplayed(true);// show label
    }

    You can use it like:
    hideField(combo); or showField(combo);

    I hope it help you.

    Webpaul

    It help me to resolved my problem too!

  8. #18
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,618
    Vote Rating
    52
      0  

    Default

    Quote Originally Posted by Condor View Post
    Or you could try a different workaround which makes show(), hide(), enable() and disable() act on the label.

    Code:
    Ext.override(Ext.layout.FormLayout, {
        renderItem : function(c, position, target){
            if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
                var args = [
                       c.id, c.fieldLabel,
                       c.labelStyle||this.labelStyle||'',
                       this.elementStyle||'',
                       typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                       (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                       c.clearCls || 'x-form-clear-left' 
                ];
                if(typeof position == 'number'){
                    position = target.dom.childNodes[position] || null;
                }
                c.actionMode = 'formItem';
                if(position){
                    c.formItem = Ext.get(this.fieldTpl.insertBefore(position, args));
                }else{
                    c.formItem = Ext.get(this.fieldTpl.append(target, args));
                }
                c.render('x-form-el-'+c.id);
            }else {
                Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
            }
        }
    });
    I like your thinking there Condor.

    If the Ext base version of FormLayout could register the formItem in each field, then we would just have to configure our Fields with actionMode:'formItem' to fix this silly problem once and for all.

    Do you want to go back to that thread in "Bugs" and suggest your fix?

  9. #19
    Sencha User
    Join Date
    Dec 2007
    Location
    Budapest, Hungary
    Posts
    122
    Vote Rating
    7
      0  

    Default

    Quote Originally Posted by lkbao View Post
    Hi nbourdeau,

    Following is my code

    [...]

    Once more time, thanks a lot for your help.
    Wishing you and your family are happy.

    Bao
    Hi,

    I had a similar problem (if I spelled your error correctly).
    So my issue was that the overridden onRender function was executed before the field was actually rendered (by the way, I am experimenting on a ComboBox)
    So finally I came up with this:

    Code:
    Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(config) {
    	if(Ext.isEmpty(this.wrap))
    	{
    	    if (this.hiddenContainer == true) {
    			function hide(field)
    			{
    	        	field.hideContainer();
    				field.un('render', hide);
    			}
    			this.on('render', hide);
    	    }
    	}
    	else
    	{
    	    if (this.hiddenContainer == true) {
    	        this.hideContainer();
    	    }
    	}
    });
    First I tried if(!this.rendered)) instead of the this.wrap checking, but it showed that the field is rendered, so I had to check if the wrap object exists.

    Hope this helps you.

    Zolcsi

  10. #20
    Sencha User forefront's Avatar
    Join Date
    Feb 2008
    Location
    Shanghai
    Posts
    60
    Vote Rating
    0
      0  

    Smile

    How to do for radio button field?

Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •