Feb 09, 2009, 5:25 AM
Adding Form fields at run time
I have a form with 4 sections, each one having a group of fields (inside fieldsets). For each section I want to be able to insert and remove multiple fields (group of fields) at the desired places on a button click. I need a simple way to achieve this. Can someone please advise. Or would it be a better idea to write the form in ext altogether and then call functions to add and remove things.
My form:
My form:
<ext:Window
ID="OrgEntityWindow"
runat="server"
showonload="false"
Collapsible="true"
Resizable="true"
Icon="ApplicationDouble"
Title="Add New Organisational Entity"
Width="650"
Height="450" AutoScroll="true"
Constrain="true"
Modal="true" BodyBorder="true"
BodyStyle="padding : 10px;" Minimizable="True">
<Body>
<ext:TextField ID="OrgEntityFormMode" Text="" Hidden="true" runat="server" />
<ext:TextField ID="OrgEntityType" Text="" Hidden="true" runat="server" />
<ext:FormLayout ID="OrgEntityFormLayout" Cls="formlayout" Width="500" runat="server">
<ext:Anchor>
<ext:TextField
ID="OrgEntityName"
FieldLabel="Name"
InputType="Text"
LabelStyle="padding-left:8px;font-weight:bold"
AllowBlank="false"
Width="200"
BlankText="Name is required"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:FieldSet ID="Address1FieldSet" Collapsible="true" runat="server" AutoHeight="true" Title="Address">
<Body>
<ext:Panel ID="ContainerPanelAddress1" runat="server" Title="Address 1" BodyBorder="false" BodyStyle="background:none;padding: 10px 0;">
<Body>
<ext:ColumnLayout ID="Address1ColumnLayout" runat="server">
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="Address1PanelLeft" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="Address1FormLayoutLeft" runat="server">
<ext:Anchor>
<ext:TextField
ID="Address1A1"
FieldLabel="Address Line 1"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="130"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:TextField
ID="Address1A3"
FieldLabel="Address Line 3"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="130"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:TextField
ID="Address1Town"
FieldLabel="Town/City"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="130"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:TextField
ID="Address1PostCode"
FieldLabel="Post Code"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="100"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="Address1PanelRight" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="Address1FormLayoutRight" runat="server">
<ext:Anchor>
<ext:TextField
ID="Address1A2"
FieldLabel="Address Line 2"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="130"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:TextField
ID="Address1A4"
FieldLabel="Address Line 4"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="130"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:TextField
ID="Address1County"
FieldLabel="County/State"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="130"
runat="server" />
</ext:Anchor>
<ext:Anchor>
<ext:ComboBox ID="Address1CountryList" FieldLabel="Country" LabelStyle="padding-left:8px;font-weight:bold" runat="server">
<SelectedItem Value="United Kingdom" />
<Items>
<ext:ListItem Text="United Kingdom" Value="United Kingdom" />
</Items>
</ext:ComboBox>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
</Body>
<Buttons>
<ext:Button ID="AddAddressBtn" runat="server" Text="Add Another Address" OnClientClick="OrgEntityHandler.addAddressFields();"></ext:Button>
</Buttons>
</ext:FieldSet>
</ext:Anchor>
<ext:Anchor>
<ext:FieldSet ID="Phone1FieldSet" Collapsible="true" runat="server" Title="Phone No">
<Body>
<ext:ColumnLayout ID="Phone1OuterLayout" runat="server">
<ext:LayoutColumn ColumnWidth="0.33">
<ext:Panel ID="Phone1TitlePanel" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="Phone1TitleLayout" runat="server">
<ext:Anchor Horizontal="90%">
<ext:TextField
ID="Phone1Title"
FieldLabel="Title/Name"
LabelStyle="padding-left:5px;font-weight:bold"
InputType="Text"
Width="100"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.33">
<ext:Panel ID="Phone1RegionCodePanel" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="Phone1RegionCodeFormLayout" runat="server">
<ext:Anchor Horizontal="90%">
<ext:TextField
ID="Phone1RegionCode"
FieldLabel="Region Code"
LabelStyle="padding-left:5px;font-weight:bold"
InputType="Text"
Width="60"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.33">
<ext:Panel ID="Phone1NumberPanel" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="Phone1NumberFormLayout" runat="server">
<ext:Anchor Horizontal="90%">
<ext:TextField
ID="Phone1Number"
FieldLabel="Phone Number"
LabelStyle="padding-left:5px;font-weight:bold"
InputType="Text"
Width="70"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:FieldSet>
</ext:Anchor>
<ext:Anchor>
<ext:FieldSet ID="EmailAddress1FieldSet" runat="server" Collapsible="true" Title="Email Address">
<Body>
<ext:ColumnLayout ID="EmailAddress1OuterLayout" runat="server">
<ext:LayoutColumn ColumnWidth="0.4">
<ext:Panel ID="EmailAddress1TitlePanel" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="EmailAddress1TitleLayout" runat="server">
<ext:Anchor Horizontal="90%">
<ext:TextField
ID="EmailAddress1Title"
FieldLabel="Title/Name"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="120"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.6">
<ext:Panel ID="EmailAddress1Panel" runat="server" BodyBorder="false" BodyStyle="background:none;">
<Body>
<ext:FormLayout ID="EmailAddress1Layout" runat="server">
<ext:Anchor Horizontal="90%">
<ext:TextField
ID="EmailAddress1"
FieldLabel="Email Address"
LabelStyle="padding-left:8px;font-weight:bold"
InputType="Text"
Width="100" Vtype="email"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:FieldSet>
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:HtmlEditor
ID="OrgEntityDescription"
FieldLabel="Description"
LabelStyle="padding-left:8px;font-weight:bold"
EnableColors="false"
EnableSourceEdit="false"
runat="server" />
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="OrgEntityButton" OnClientClick ="OrgEntityHandler.editOrgEntity(); return false" runat="server" Text="Add Child Organisation" />
<ext:Button ID="CancelOrgEntityFormButton" OnClientClick="OrgEntityHandler.cancelForm();" runat="server" Text="Cancel" />
</Buttons>
<Listeners>
<Hide Handler=" OrgEntityHandler.cancelForm(); return false" />
</Listeners>
</ext:Window>
