Printable View
Hi,
I'm trying to set the length of the CompositeField Label property in order to have its controls left-aligned with the FormPanel's controls just above. CompositeFields reside on a FormPanel-nested FieldsSet and therefore are right-shifted a bit. Setting LabelWidth seemingly has no effect. Please suggest the correct approach to achieve the controls alignment.
Please start us off with a simple sample demonstrating what you have configured so far.
The following forum posts provide guides on submitting forum posts and code samples:
http://forums.ext.net/showthread.php...ing-New-Topics
http://forums.ext.net/showthread.php...ation-Required
I'm trying to left-align the FirstField and LastName text fields. Please advise how to approach this.
Code:<%@ Page Language="C#" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:FormPanel runat="server" Padding="10" LabelAlign="Left" Border="true"
Width="500" Frame="true">
<Items>
<ext:CompositeField runat="server" FieldLabel="First Field">
<Items>
<ext:TextField runat="server" Width="100" />
<ext:ToolbarSpacer Width="20">
</ext:ToolbarSpacer>
<ext:DisplayField runat="server" Text="Date:" Width="60">
</ext:DisplayField>
<ext:DateField runat="server" Editable="false" Width="100">
</ext:DateField>
</Items>
</ext:CompositeField>
<ext:FieldSet runat="server" Title="Search Criteria" Layout="FormLayout">
<Items>
<ext:CompositeField runat="server" FieldLabel="Last Name">
<Items>
<ext:TextField runat="server" Width="100" />
<ext:DisplayField runat="server" Text="First Name:" Width="60">
</ext:DisplayField>
<ext:TextField runat="server" Width="100" />
</Items>
</ext:CompositeField>
<ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="Province">
<Items>
<ext:TextField runat="server" Width="100" />
<ext:DisplayField runat="server" Text="City:" Width="60">
</ext:DisplayField>
<ext:TextField runat="server" Width="100" />
</Items>
</ext:CompositeField>
</Items>
</ext:FieldSet>
</Items>
</ext:FormPanel>
</form>
</body>
</html>
Hi,
Thanks for the sample.
You should set up LabelWidth for the containers, not for the fields.
For example,
for the FormPanel andCode:LabelWidth="55"
for the FieldSet.Code:LabelWidth="65"
See also
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.FormPanel-cfg-labelWidth
In Ext.NET v2 this and other FieldLabel settings can be specified for separate fields.
Thanks for the clarification Daniil! That's explained it pretty well. You can mark this thread as resolved.