1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default How to remove the space taken by hidden field on form

    How to remove the space taken by hidden field on form


    Hello All,

    In my Application, I am using the same form to view/edit the Page.
    I one case, to edit a field I am using a combobox and to view the same field I am using a simple text field. Iam hiding/showing the field based on view/edit action. This, is working Ok and fields are shown properly.
    But, my problem is when I edit the page, I am hiding that text field and showing the comboon page, but still that text field (field is hidden) is occupying some space on the form. Is there anyway by whichwe can remove this space taken by the hidden field.

    I hope I am clear to you all.

    Thanks
    Hemant

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This override should work.

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default


    Thanks for your quick reply Condor.

    I am already using the same override to hide/show the fields while view/edit action.
    not exactly the same but the modified one posted in the same thread here http://extjs.com/forum/showthread.php?p=209449#post209449, and it is working Ok for me.

    I tried to use the override posted by you then, my fields label are not hiding/showing properly, in every action all labels are active. In edit, I can see the label of the text fields and vice versa.

    Thanks,
    Hemant

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, my code was wrong; Use the one Animal posted.

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default


    Actually I am using the same override posted by animal, but my hidden fields label are not hiding in this case.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    And did you read my follow-up post (try the override I just added).

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default


    Hello Condor, thanks for reply,

    I tried adding that override, but no success

    Ext.override(Ext.form.TriggerField, {
    actionMode: 'wrap',
    onShow: Ext.form.TriggerField.superclass.onShow,
    onHide: Ext.form.TriggerField.superclass.onHide
    });


    The formLayout override which I am using is like this,

    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;
    }
    if(position){
    c.formItem = this.fieldTpl.insertBefore(position, args, true);
    }else{
    c.formItem = this.fieldTpl.append(target, args, true);
    }

    // Remove the form layout wrapper on Field destroy.
    c.on('destroy', c.formItem.remove, c.formItem, {single: true});
    c.on('hide', c.formItem.hide, c.formItem, {single: false});
    c.on('show', c.formItem.show, c.formItem, {single: false});
    c.render('x-form-el-'+c.id);
    }else {
    Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
    }
    }
    });


    Actually there are some hidden fields(text fields, combo etc), but that are taking some space in my form
    how can I remove space taken by these hidden fields?

    Thanks.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I was suggesting this override:
    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;
    			}
    			if(position){
    				c.formItem = this.fieldTpl.insertBefore(position, args, true);
    			}else{
    				c.formItem = this.fieldTpl.append(target, args, true);
    			}
    			c.render('x-form-el-'+c.id);
    			c.actionMode = 'formItem';
    		}else {
    			Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
    		}
    	}
    });
    Ext.override(Ext.form.TriggerField, {
    	actionMode: 'wrap',
    	onShow: Ext.form.TriggerField.superclass.onShow,
    	onHide: Ext.form.TriggerField.superclass.onHide
    });
    Does this still leave extra space after hiding a field?

    Can you check with Firebug or Developer Toolbar which DOM element is causing the extra space?

  9. #9
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default


    Hello Condor and All,

    Your override does not work for me,

    Actually, I am using a single form to view/edit the item.
    And, if user say first view the entity, then we are showing/hiding some fields and adding a form tab. So, next if users edit the entity, then we are using the same form tab to show edit information, by changing styles of textboxes(put border around them etc) and redrawing the form(not rendering form again).
    Also, I am displaying a combobox in edit entity, and when we view the same then hiding that combo, and showing another textfield. If user view first view entity, then I am first showing the textfield and hiding combo, and when users edit the entity, then hiding the text and showing combo.

    Also, i am having a text field which I am hiding/showing based on view/edit action
    With my override code:
    All Fields(incluiding combo) are hiding/showing properly, but the hidden fields are taking space on form.

    With your override code:
    Labels of all fields are visible on form, so in edit if I am showing a combo, then in addition to that the text field's label is visible. but when I switch to view then combo get hidden(and it doesn't take space on form), but I can only see the textbox label and not the textbox.

    The field which I want hide/show is like this..
    Code:
                        },{
                            fieldLabel: "label111",
                            name: 'userType',
                            id: 'text-id111',
                            hidden: !(this.flag)
                        }]
    The combo and textfields which I am hiding/showing alternate is like this,
    Code:
                        },{                    
                            xtype:'combo',
                            fieldLabel: "Test Label",
                            store: testStore,
                            displayField: 'Value',
                            valueField: 'Name',
                            hiddenName: 'test',
                            triggeAction: 'all',  
                            editable: false,            
                            id: 'combo-id',
                            width: 200,
                            hidden: this.readOnly
                        },{
                            fieldLabel:  "Test Label",
                            name: text-id',
                            id: 'text-id',
                            hidden: !(this.readOnly)
                        },{
    Am I clear to you all?

    Thanks and Appreciate your response.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Wow, I always assumed that Animal's code was correct, but it isn't!

    The correct code is:
    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;
    			}
    			if(position){
    				c.formItem = this.fieldTpl.insertBefore(position, args, true);
    			}else{
    				c.formItem = this.fieldTpl.append(target, args, true);
    			}
    			c.actionMode = 'formItem';
    			c.render('x-form-el-'+c.id);
    			c.container = c.formItem;
    			c.actionMode = 'container';
    		}else {
    			Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
    		}
    	},
    });
    Ext.override(Ext.form.TriggerField, {
    	actionMode: 'wrap',
    	onShow: Ext.form.TriggerField.superclass.onShow,
    	onHide: Ext.form.TriggerField.superclass.onHide
    });
    Last edited by Condor; 9 Jan 2009 at 1:48 AM. Reason: Fixed yet another bug