Example showing problem:
var form = function() {
return {
init : function() {
var viewport = new Ext.Viewport({
layout: "border",
items:
new Ext.form.FormPanel({
region: "center",
frame: false,
bodyStyle: "padding:5px 10px 0 10px;",
autoHeight: true,
frame: true,
id: "form-ctr",
items: [{
xtype: "fieldset",
layout: "table",
height: 400,
layoutConfig: {columns: 2},
items: [{
layout: "form",
items: [{
xtype: "textfield",
fieldLabel: "Text Area",
anchor: "98%"
}]
},{
layout: "form",
items: [{
xtype: "textfield",
fieldLabel: "Text Field",
anchor: "98%"
}]
},{
layout: "form",
items: [{
xtype: "textfield",
fieldLabel: "Text Field",
anchor: "98%"
}]
},{
layout: "form",
items: [{
xtype: "textfield",
fieldLabel: "Text Field",
anchor: "98%"
}]
},{
layout: "form",
items: [{
xtype: "textfield",
fieldLabel: "Text Field",
anchor: "98%"
}]
},{
layout: "form",
items: [{
xtype: "checkbox",
fieldLabel: "Check Box",
anchor: "0%"
}]
}]
}]
})
});
}
}
}();
Ext.onReady(function() {
form.init();
}, form);
The checkbox is misaligned, and is wrongly given by a left:-8px (given by the onResize)
My proposed fix is to only perform the alignTo if there is no boxLabel and no fieldLabel:
Ext.override(Ext.form.Checkbox, {
onResize : function(){
Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
if (!this.boxLabel && !this.fieldLabel) {
this.el.alignTo(this.wrap, 'c-c');
}
}
});
06-05-2008, 12:23 PM
[2.1][FIXED] Checkbox with no boxLabel aligns badly within form
