PDA

View Full Version : Form inside FieldSet layout issue



frank.zammetti
9 Jan 2014, 2:47 PM
Hi folks... I'm hoping someone spots my stupidity because I'm going crazy with this... take a look at the code below... basically, it's a FormPanel as the center region of a BorderLayout, and the form uses a Column layout. In each of the three columns is some number of FieldSets and within those are form fields. All these fields need to be one single form.

The problem I'm having is that I need to have row stripping in the form, but I can't seem to manage that and still get everything lined up right... I'm using the same sort of simple stripping strategy I've used in the past, but for some reason with this layout it doesn't work while still getting everything to line up (and to ensure that the size of the fields is honored- some things I've tried results in them stretching to fill the FieldSet space, which I don't want).

I've tried everything I can think of and I'm at my wits end with it... The fields themselves never seem to line up on the left after the labesl, they float right as you can see if you load this (from browsing the DOM it seems the cell the label gets put in is too wide) or I can line them up using some very nasty hacky CSS (and which doesn't work for the DateFields anyway)... the field with the label GOOD is what it SHOULD look like, but obviously without the nasty CSS there.

Any suggestions would be greatly appreciated... note that the one suggestion I expect to get, that the FieldSets need a layout specified, may be the right answer, but I've spent hours messing around with various layouts there and I've had no luck... leaving it auto seems to get me the closest, so if it is the right answer I can't make it work.

Thanks in advance!


<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script>

Ext.onReady(function() {
Ext.create("Ext.container.Viewport", getViewportConfig());
});


function getViewportConfig() { return(

{ border : 0, layout : "border",
items : [

{ region : "north", height : 40, border : false,
style : "text-align:right;",
html : "XXX&nbsp;"
},

{ region : "center", border : false, id : "myForm", layout : "column",
xtype : "form", autoScroll : true, bodyStyle : "padding:10px;",
items : [

{ width : 400, border : false,
items : [

{ xtype : "fieldset", border : true,
title : "<b>XXX</b>",
defaults : {
xtype : "textfield", labelWidth : 150,
hideEmptyLabel : false, labelSeparator : "",
labelCls : "bold x-form-item-label x-unselectable x-form-item-label-left"
},
items : [
{ fieldLabel : "XXX", size : 7 },
{ fieldLabel : "XXX", size : 10,
style : "width:100%;background-color:#efefef;"
},
{ fieldLabel : "XXX", size : 10 },
{ fieldLabel : "GOOD",
size : 2,
style : "width:100%;background-color:#efefef;",
fieldStyle : "position:relative;left:-157px;"
},
{ fieldLabel : "XXX", xtype : "checkbox" },
{ fieldLabel : "XXX", xtype : "datefield",
style : "background-color:#efefef;"
}
]
},

{ xtype : "fieldset", width : "100%", border : true, rowspan : 2,
title : "<b>XXX</b>",
defaults : {
xtype : "textfield", labelWidth : 150,
hideEmptyLabel : false, labelSeparator : "",
labelCls : "bold x-form-item-label x-unselectable x-form-item-label-left"
},
items : [
{ fieldLabel : "XXX", size : 10 },
{ fieldLabel : "XXX", size : 7,
style : "background-color:#efefef;"
},
{ fieldLabel : "XXX", xtype : "datefield" }
]
}

]
},

{ width : 10, border : false,
items : [
{ html : "&nbsp;", border : false }
]
},

{ width : 400, border : false,
items : [

{ xtype : "fieldset", width : "100%", border : true,
title : "<b>XXX</b>",
defaults : {
xtype : "textfield", labelWidth : 150,
hideEmptyLabel : false, labelSeparator : "",
labelCls : "bold x-form-item-label x-unselectable x-form-item-label-left"
},
items : [
{ fieldLabel : "XXX", size : 12 },
{ fieldLabel : "XXX", size : 14,
style : "background-color:#efefef;"
},
{ fieldLabel : "XXX", xtype : "datefield" }
]
}

]
},

{ width : 10, border : false,
items : [
{ html : "&nbsp;", border : false }
]
},

{ width : 400, border : false,
items : [

{ xtype : "fieldset", width : "100%", border : true,
title : "<b>XXX</b>",
defaults : {
xtype : "textfield", labelWidth : 150,
hideEmptyLabel : false, labelSeparator : "",
labelCls : "bold x-form-item-label x-unselectable x-form-item-label-left"
},
items : [
{ fieldLabel : "XXX", size : 5 },
{ fieldLabel : "XXX", xtype : "checkbox",
style : "background-color:#efefef;"
}
]
},

{ xtype : "fieldset", width : "100%", border : true,
title : "<b>XXX</b>",
defaults : {
xtype : "textfield", labelWidth : 150,
hideEmptyLabel : false, labelSeparator : "",
labelCls : "bold x-form-item-label x-unselectable x-form-item-label-left"
},
items : [
{ fieldLabel : "XXX", xtype : "checkbox" },
{ fieldLabel : "XXX", xtype : "checkbox",
style : "background-color:#efefef;"
},
{ fieldLabel : "XXX", xtype : "datefield" }
]
}

]
}

]
}

]
}

);}

</script>
</head>
<body></body>
</html>

evant
9 Jan 2014, 3:25 PM
Your code doesn't run, there's syntax errors in it. I'd suggest setting up a fiddle: http://fiddle.sencha.com.

Would also suggest using the beautify option, I find it fairly difficult to read the code, the indenting isn't really consistent.

frank.zammetti
10 Jan 2014, 7:17 AM
What syntax errors are you seeing Evan? I'm running this in Firefox 26 and not seeing any, it works as expected (which is to say not the way I want of course, but without error I mean). This is ExtJS 4.2.1 by the way, I realized I didn't mention that in the original post.

I'm also not sure what you mean about the indenting... you may not like the code style, but that's a whole other thing and largely a matter of opinion... the indentation looks 100% consistent on my screen and in the pasted code in this thread, everything lines up as it should, etc., so I'm not sure what you're seeing.

Fiddle, which I never heard of before, won't load for me... a bunch of 404's are happening, so I'm not bothering with that.

frank.zammetti
10 Jan 2014, 11:21 AM
I managed to find a solution, though it's not one I'm thrilled with... simply, the following is added to any field that is a striped row:
baseBodyCls : Ext.baseCSSPrefix + "form-item-body cssStripedField", ...and cssStripedField is nothing but:
.cssStripedField { float : left; } It's not a terrible answer given that we already have the style attribute for the striping itself, so one more attribute doesn't hurt my head entirely, though it still feels a little hackish... I'll probably encapsulated as a custom control or some such to avoid that, that'll make me feel a *little* better about it, but ultimately that does the trick for my use case. I'll mark as answered (as soon as I figure out how) since I seem to be good to go now. EDIT: Hmm, does one simply close the thread to indicate answered? Maybe I'm missing it, but I don't see an explicit way to mark it as read?