ExtAspNet应用技巧（一）

如何有效控制表单中控件的位置？

我们就拿一位网友的例子来说明这个问题，首先看段使用ExtAspNet的代码：

<ext:PageManager ID="PageManager1" runat="server"></ext:PageManager>
<ext:Panel ID="Panel1" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
ShowBorder="true" ShowHeader="true" Title="物料主檔查詢" Width="700">
<ext:CheckBox ID="CheckBox1" runat="server" ShowLabel="false" Text="我確定以下復合條件均不需要輸入">
</ext:CheckBox>
<ext:GroupPanel ID="GroupPanel1" runat="server" AutoHeight="true" Title="查詢條件">
<ext:Form ID="Form2" runat="server" EnableBackgroundColor="true" ShowHeader="false"
ShowBorder="false">
<ext:FormRow>
<ext:DropDownList ID="DropDownList1" runat="server" ShowLabel="false" Width="130">
<ext:ListItem Text="物料編號" Value="itemcode" Selected="true" />
<ext:ListItem Text="規格" Value="specify" />
</ext:DropDownList>
<ext:DropDownList ID="DropDownList2" runat="server" ShowLabel="false" Width="80">
<ext:ListItem Text="等于" Value="=" Selected="true" />
<ext:ListItem Text="不等于" Value="!=" />
</ext:DropDownList>
<ext:TextBox ID="TextBox1" runat="server" ShowLabel="false" Width="160">
</ext:TextBox>
<ext:TextBox ID="TextBox2" runat="server" ShowLabel="false" Width="130" Readonly="true">
</ext:TextBox>
</ext:FormRow>
<ext:FormRow>
<ext:DropDownList ID="DropDownList3" runat="server" ShowLabel="false" Width="130">
<ext:ListItem Text="" Value="" Selected="true" />
<ext:ListItem Text="并且(AND)" Value="AND" />
<ext:ListItem Text="或者(OR)" Value="OR" />
</ext:DropDownList>
<ext:Button ID="Button1" runat="server" Text="增加條件">
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="刪除條件">
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="保存條件">
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="提取條件">
</ext:Button>
</ext:FormRow>
<ext:FormRow>
<ext:TextArea ID="TextArea1" runat="server" Height="80px" ShowLabel="false" Text=""
Readonly="true">
</ext:TextArea>
</ext:FormRow>
</ext:Form>
</ext:GroupPanel>
<ext:GroupPanel ID="GroupPanel2" runat="server" AutoHeight="true" Title="排序欄位">
<ext:Form ID="Form3" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
ShowHeader="false" ShowBorder="false">
<ext:FormRow>
<ext:DropDownList ID="DropDownList4" runat="server" ShowLabel="false" Width="130">
<ext:ListItem Text="物料編號" Value="itemcode" Selected="true" />
<ext:ListItem Text="物料模型" Value="wmode" />
</ext:DropDownList>
<ext:Button ID="Button5" runat="server" Text="增加欄位">
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="刪除欄位">
</ext:Button>
</ext:FormRow>
<ext:FormRow>
<ext:TextArea ID="TextArea2" runat="server" Height="50px" ShowLabel="false" Text=""
Readonly="true">
</ext:TextArea>
</ext:FormRow>
</ext:Form>
</ext:GroupPanel>
</ext:Panel>

生成的页面截图为：

<ext:PageManager ID="PageManager1" FormOffsetRight="5px" runat="server"></ext:PageManager>
<ext:Panel ID="Panel1" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
ShowBorder="true" ShowHeader="true" Title="物料主檔查詢" Width="700">
<ext:CheckBox ID="CheckBox1" runat="server" ShowLabel="false" Text="我確定以下復合條件均不需要輸入">
</ext:CheckBox>
<ext:GroupPanel ID="GroupPanel1" runat="server" AutoHeight="true" Title="查詢條件">
<ext:Form ID="Form2" runat="server" EnableBackgroundColor="true" ShowHeader="false"
ShowBorder="false">
<ext:FormRow>
<ext:DropDownList ID="DropDownList1" runat="server" ShowLabel="false">
<ext:ListItem Text="物料編號" Value="itemcode" Selected="true" />
<ext:ListItem Text="規格" Value="specify" />
</ext:DropDownList>
<ext:DropDownList ID="DropDownList2" runat="server" ShowLabel="false">
<ext:ListItem Text="等于" Value="=" Selected="true" />
<ext:ListItem Text="不等于" Value="!=" />
</ext:DropDownList>
<ext:TextBox ID="TextBox1" runat="server" ShowLabel="false">
</ext:TextBox>
<ext:TextBox ID="TextBox2" runat="server" ShowLabel="false" Readonly="true">
</ext:TextBox>
</ext:FormRow>
<ext:FormRow ColumnWidths="25% 75%">
<ext:DropDownList ID="DropDownList3" runat="server" ShowLabel="false">
<ext:ListItem Text="" Value="" Selected="true" />
<ext:ListItem Text="并且(AND)" Value="AND" />
<ext:ListItem Text="或者(OR)" Value="OR" />
</ext:DropDownList>
<ext:Panel runat="server" ShowBorder="false" ShowHeader="false" EnableBackgroundColor="true">
<ext:Button ID="Button1" runat="server" Text="增加條件" CssClass="buttonMargin">
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="刪除條件" CssClass="buttonMargin">
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="保存條件" CssClass="buttonMargin">
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="提取條件" CssClass="buttonMargin">
</ext:Button>
</ext:Panel>
</ext:FormRow>
<ext:FormRow>
<ext:TextArea ID="TextArea1" runat="server" Height="80px" ShowLabel="false" Text=""
Readonly="true">
</ext:TextArea>
</ext:FormRow>
</ext:Form>
</ext:GroupPanel>
<ext:GroupPanel ID="GroupPanel2" runat="server" AutoHeight="true" Title="排序欄位">
<ext:Form ID="Form3" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
ShowHeader="false" ShowBorder="false">
<ext:FormRow ColumnWidths="25% 75%">
<ext:DropDownList ID="DropDownList4" runat="server" ShowLabel="false">
<ext:ListItem Text="物料編號" Value="itemcode" Selected="true" />
<ext:ListItem Text="物料模型" Value="wmode" />
</ext:DropDownList>
<ext:Panel ID="Panel2" runat="server" ShowBorder="false" ShowHeader="false" EnableBackgroundColor="true">
<ext:Button ID="Button5" runat="server" Text="增加欄位" CssClass="buttonMargin">
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="刪除欄位" CssClass="buttonMargin">
</ext:Button>
</ext:Panel>
</ext:FormRow>
<ext:FormRow>
<ext:TextArea ID="TextArea2" runat="server" Height="50px" ShowLabel="false" Text=""
Readonly="true">
</ext:TextArea>
</ext:FormRow>
</ext:Form>
</ext:GroupPanel>
</ext:Panel>