PDA

View Full Version : [FIXED][3.0,2.x]FormLayout. adjustXXXXAnchor problems



Animal
16 Jul 2009, 12:25 PM
FormLayout extends AnchorLayout.

It overrides adjustWidthAnchor to account for the label width. This does not take into account the label align being "top" meaning that the label is above the field. In this case there should be zero width adjustment.

Also, there is no adjustHeightAnchor, so height anchoring does not take into account any label being aligned at the top. If there is a label at the top, the label height must be subtracted.

The fixes are below:



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,
this.getLabelStyle(c.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.itemCt = this.fieldTpl.insertBefore(position, args, true);
}else{
c.itemCt = this.fieldTpl.append(target, args, true);
}
c.render('x-form-el-'+c.id);
c.label = c.itemCt.child('label.x-form-item-label');
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
},

adjustWidthAnchor : function(value, comp){
return value - (comp.isFormField ? (comp.hideLabel || (this.container.labelAlign == 'top') ? 0 : this.labelAdjust) : 0);
},

adjustHeightAnchor : function(value, comp){
return value - (comp.isFormField ? (comp.hideLabel ? 0 : this.container.labelAlign == 'top' ? comp.label.getHeight() : 0) : 0);
}
});


This also means that we can use



Ext.override(Ext.form.Field, {
getItemCt : function(){
return this.itemCt;
},
});

Animal
16 Jul 2009, 10:27 PM
Of course that's the 2.0 version of the code.. that's what I was working on when I hit this.

Animal
16 Jul 2009, 10:31 PM
3.0:



renderItem : function(c, position, target){
if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
var args = this.getTemplateArgs(c);
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
if(position){
c.itemCt = this.fieldTpl.insertBefore(position, args, true);
}else{
c.itemCt = this.fieldTpl.append(target, args, true);
}
c.render('x-form-el-'+c.id);
c.label = c.itemCt.child('label.x-form-item-label');
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
},

adjustWidthAnchor : function(value, comp){
return value - ((comp.isFormField || comp.fieldLabel) ? (comp.hideLabel || (this.container.labelAlign == 'top') ? 0 : this.labelAdjust) : 0);
},

adjustHeightAnchor : function(value, comp){
return value - ((comp.isFormField || comp.fieldLabel) ? (comp.hideLabel ? 0 : this.container.labelAlign == 'top' ? comp.label.getHeight() : 0) : 0);
}

Condor
16 Jul 2009, 10:50 PM
1. Why use ItemCt (captital I)?
2. Wouldn't it be clearer to write the condition as:

return value - ((comp.isFormField || comp.fieldLabel) && !comp.hideLabel && (this.container.labelAlign != 'top') ? this.labelAdjust) : 0);
3. Does this work correctly when setting hideLabels:true in the form config (the label is display:none, so would the height indeed be 0 on all browsers?).

Animal
16 Jul 2009, 11:43 PM
1. Why use ItemCt (captital I)?

Mistype.


2. Wouldn't it be clearer to write the condition as:

return value - ((comp.isFormField || comp.fieldLabel) && !comp.hideLabel && (this.container.labelAlign != 'top') ? this.labelAdjust) : 0);

Whatever works!



3. Does this work correctly when setting hideLabels:true in the form config (the label is display:none, so would the height indeed be 0 on all browsers?).

Yes:



adjustHeightAnchor : function(value, comp){
return value - ((comp.isFormField || comp.fieldLabel) ? (comp.hideLabel ? 0 : this.container.labelAlign == 'top' ? comp.label.getHeight() : 0) : 0);
}

Condor
17 Jul 2009, 12:15 AM
Yes:



adjustHeightAnchor : function(value, comp){
return value - ((comp.isFormField || comp.fieldLabel) ? (comp.hideLabel ? 0 : this.container.labelAlign == 'top' ? comp.label.getHeight() : 0) : 0);
}

No, I mean the hideLabels config option of the form layout container.

Animal
17 Jul 2009, 12:32 AM
I see. Yes, it would have to check that too.

Probably best to unwind that snigle statement into a more readable condition just to make sure eveything is tested.

Also, because we are stamping a label property into any fields that are rendered with this need, the test can be "if (comp.label)":



adjustWidthAnchor: function(value, comp) {
var ct = this.container;
if (comp.label && !comp.hideLabel && !ct.hideLabels && (ct.labelAlign != 'top')) {
return value - this.labelAdjust;
}
return 0;
},

adjustHeightAnchor : function(value, comp){
var ct = this.container;
if (comp.label && !comp.hideLabel && !ct.hideLabels && (ct.labelAlign == 'top')) {
return value - comp.label.getHeight();
}
return 0;
}

Animal
20 Jul 2009, 2:26 AM
Has this been seen? The devs have not added a status to its title.

evant
20 Jul 2009, 2:30 AM
Thanks for the bump, marked as open.

evant
5 Aug 2009, 8:32 AM
Fixed in SVN.

mjlecomte
9 Aug 2009, 5:53 PM
Committed code was incorrect see this thread:
http://extjs.com/forum/showthread.php?p=370369#post370369