PDA

View Full Version : form panel - auto width labels and center alignment



chinabuffet
8 Nov 2010, 6:19 PM
I'm trying to make a form thats embedded inside a Window, but am having some problems trying to style it according to my required specifications. The form itself has 3 "rows" basically, a combo box with a field label, a checkbox with a box label, and then 2 buttons. Problems:

1. The first row, with the combo box, needs to have the field label be an "auto" width, because its label text will vary. Simply using labelAlign: "right" by itself doesn't work because of my 2nd problem.

2. I need each "row" to be centered, based on that rows width. The screenshot I attached probably explains this the best. I can do this using a table layout and then setting each table to have "display: block; margin: 0 auto;", but then I have to manually add labels as separate items and lose the styling around them inherited from the FormPanel... requiring hacking CSS to be applied as well.

What's the best way to accomplish something like this? The form itself is simplified from the actual implementation.

Thanks!

Here is the code for the current window:



Ext.onReady(function() {
new Ext.Window({
width: 450,
title: "My Cool Window Form",
padding: 20,
bodyStyle: "background-color: #fff",
items: {
xtype: "panel",
border: false,
layout: "form",
defaults: {
labelStyle: "font-weight: bold"
},
items: [{
fieldLabel: "Name",
xtype: "combo"
}, {
boxLabel: "Check if you're totally super awesome",
labelWidth: 150,
xtype: "checkbox"
}],
buttonAlign: "center",
buttons: [{
text: "Save"
}, {
text: "Cancel"
}]
}
}).show();
});



http://www.cricketwoodworks.com/example.jpg

goden690426
8 Nov 2010, 8:00 PM
Suggest to use the "hideLabel" attribute on checkbox, set it true.
Then define a item class with "cls" or "style" to have padding-left to fit your request.

chinabuffet
8 Nov 2010, 8:07 PM
I'm not quite sure I follow...

Setting hideLabel on the 2nd row would match the left edge of the checkbox to the "Name" label above. I cannot simply add an arbitrary amount of left padding to "center" it because the text of "Name" can change; the first 2 rows need to be independently center aligned somehow.

darthwes
8 Nov 2010, 8:57 PM
Wrap it with a vbox and align it center, then...


new Ext.Window({
width: 450,
title: "My Cool Window Form",
padding: 20,
bodyStyle: "background-color: #fff",
items: {
xtype: "panel",
border: false,
layout: "form",
defaults: {
labelStyle: "font-weight: bold"
},
items: [{
fieldLabel: "Name",
xtype: "combo"
}, {
xtype: 'container',
layout: 'vbox',
layoutConfig: {
align: 'center'
},
border: false,
height: 35,
items:[{
boxLabel: "Check if you're totally super awesome",
hideLabel: true,
xtype: "checkbox"
}]
}],
buttonAlign: "center",
buttons: [{
text: "Save"
}, {
text: "Cancel"
}]
}
}).show();

chinabuffet
9 Nov 2010, 6:20 AM
Thanks for the reply. That works for the 2nd row with the checkbox, but now how can I do that for the 1st row with the fieldLabel and combo box? The fieldLabel needs to be an autoWidth because the text is dynamic.

chinabuffet
9 Nov 2010, 1:13 PM
Any ideas?

chinabuffet
9 Nov 2010, 5:14 PM
Almost thinking that this could maybe be an extension of the FormLayout, maybe CenteredFormLayout or something along those lines... not really sure where to begin though.

chinabuffet
10 Nov 2010, 5:57 PM
For those interested...

I figured out a way to make this work by extending FormLayout, based on the idea I previously mentioned. The initial form code I used worked as is, just needed to swap out the layout to "centeredform" instead. Here's the code for CenteredForm:



Ext.layout.CenteredFormLayout = Ext.extend(Ext.layout.FormLayout, {

labelStyle: "font-weight: bold; float: none;",

fieldTpl: (function() {
var t = new Ext.Template(
'<div class="x-form-item {itemCls}" tabIndex="-1"><table style="margin: 0 auto;"><tr>',
'<td><label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label></td>',
'<td><div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"></td>',
'</tr></table></div>'
);
t.disableFormats = true;
return t.compile();
})(),

// private
setContainer : function(ct){
Ext.layout.CenteredFormLayout.superclass.setContainer.call(this, ct);

if(!ct.hideLabels){
Ext.apply(this, {
labelStyle: 'width:auto;',
labelAdjust: 0,
elementStyle: 'padding-left:0;'
});
}
}
});

Ext.Container.LAYOUTS['centeredform'] = Ext.layout.CenteredFormLayout;

chinabuffet
10 Nov 2010, 6:00 PM
Another note...

I had to override a style in ext-all.css to make the fields look correct in IE7. The trigger field in the combo box was pushed down 1px, and the top/bottom borders in textfields were being clipped for some reason.

ext-all.css style I had to override:



.ext-ie6 .x-form-text, .ext-ie7 .x-form-text {
margin:-1px 0; /* ie bogus margin bug */
height:22px; /* ie quirks */
line-height:18px;
}


My override:



.ext-ie7 .x-form-text {
margin: 0;
}


If anyone knows what the "ie bogus margin bug" is, I'd like to know.

Thanks.