Complex forms frequently present layout challenges in development. This section explorse techniques for structuring intricate forms using EXT.NET.

Key principles:

1. Avoid relying on Visual Studio design view. Work directly in code for better efficiency and stability.
2. Study documentation and examples thoroughly.
3. Practice implementation to master layout techniques.
4. Develop problem-solving skills using debugging tools and source anaylsis.

Consider a multi-section form layout example:

Header Implementation Create a button group for the header:

ButtonGroup shopTypeGroup = new ButtonGroup()
{
    Title = "Shop Type",
    Collapsible = true,
    ID = "shopTypeGroup"
};
shopTypeGroup.Items.Add(new Button()
{
    Text = shopStatus.TypeName ?? "None",
    Icon = string.IsNullOrEmpty(shopStatus.TypeName) ? Icon.Error : Icon.Accept,
    Width = 123,
    ID = "shopTypeButton"
});
mainForm.TopBar.Toolbar.Items.Add(shopTypeGroup);

Primary Form Section Use TableLayout for alignment control with column specifications:

<TableLayout Columns="4" ColumnWidths="20%,25%,25%,30%">
    <Cells>
        <Cell>
            <ComboBox ID="regionSelector" runat="server">
                <Listeners>
                    <Select Handler="#{provinceSelector}.clearValue(); #{ProvinceStore}.reload();" />
                </Listeners>
            </ComboBox>
        </Cell>
        <Cell>
            <ComboBox ID="provinceSelector" StoreID="ProvinceStore" runat="server">
                <Listeners>
                    <Select Handler="#{citySelector}.clearValue(); #{CityStore}.reload();" />
                </Listeners>
            </ComboBox>
        </Cell>
    </Cells>
</TableLayout>

Merge cells using ColSpan:

<Cell ColSpan="3">
    <TextField ID="homeAddress" Width="794" runat="server" />
</Cell>

Composite Fields Combine multiple inputs in a single cell:

<Cell>
    <CompositeField ID="shopPhoneField" FieldLabel="Shop Phone<font color='red'>*</font>" runat="server">
        <Items>
            <TextField ID="phonePart1" AllowBlank="false" Width="40" />
            <DisplayField Text="-" />
            <TextField ID="phonePart2" Width="70">
                <Listeners>
                    <Change Handler="this.setValue(this.getValue().replace(/[-]/g,''));" />
                </Listeners>
            </TextField>
        </Items>
    </CompositeField>
</Cell>

Dynamic Field Generation Programmatically create form eleemnts:

TableLayout dynamicLayout = new TableLayout() { Columns = 3 };
int totalIndex = 0;

foreach (var area in areaList)
{
    FormPanel areaPanel = new FormPanel() { Layout = "Column", Border = false };
    NumberField areaField = new NumberField()
    {
        FieldLabel = $"{area.Name} (M²)",
        Value = Math.Round(area.Value, 2),
        ReadOnly = area.Name == "Total Area"
    };

    if (area.Name != "Total Area")
    {
        areaField.Listeners.Change.Handler = $@"
            let total = 0;
            for(let i=0; i<{areaList.Count}; i++) {{
                if(i != {totalIndex}) {{
                    total += Ext.getCmp('dynamicField'+i).getValue();
                }}
            }}
            Ext.getCmp('totalAreaField').setValue(total);";
    }
    else
    {
        totalIndex = areaList.IndexOf(area);
    }

    areaPanel.Items.Add(areaField);
    dynamicLayout.Cells.Add(new Cell().Add(areaPanel));
}
container.Add(dynamicLayout);

Radio Groups with Additional Fields Combine radio buttons with text inputs:

<Cell ColSpan="4">
    <FormPanel Layout="Column" Border="false">
        <Items>
            <RadioGroup ID="orientationGroup" Width="350" runat="server" />
            <TextField ID="otherReasonField" FieldLabel="Other" runat="server" />
        </Items>
    </FormPanel>
</Cell>

Embedded Content Panel Load external content conditionally:

<Panel ID="historyPanel" Collapsible="true" Title="Approval History" Height="200">
    <AutoLoad Url="/history.aspx" Mode="IFrame" ShowMask="true" />
    <Listeners>
        <Expand Handler="this.reload();" />
        <Collapse Handler="this.clearContent();" />
    </Listeners>
</Panel>