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 User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    128
      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 User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,854
    Vote Rating
    87
      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?
    Longtime Sencha engineer. Now surplus to requirements apparently...

  9. #19
    Sencha User
    Join Date
    Dec 2007
    Location
    Budapest, Hungary
    Posts
    124
    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
  •