Coolite布局 表单1
效果图：
html代码：
<ext:FormPanel ID="FormPanel1" runat="server" Border="false" MonitorValid="true" Frame="true" BodyStyle="padding:0px 0px 0;" >
<TopBar>
<ext:Toolbar ID="Toolbar3" runat="server" >
<Items>
<ext:Button ID="butSave" runat="server" Text="保存" Icon="Disk" Width="130"
OnClick="butSave_Click" AutoPostBack="true" TabIndex="10">
<Listeners>
<Click Handler="
if(!#{txtContact}.validate() || !#{txtContactTel}.validate()) {
Ext.Msg.alert('警告','联系人或联系电话不能为空！');
return false;
}" />
</Listeners>
<AjaxEvents>
<Click OnEvent="butSave_Click">
<EventMask Msg="保存中..." ShowMask="true" MinDelay="50" />
</Click>
</AjaxEvents>
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="保存工单" />
</ToolTips>
</ext:Button>
<ext:Button ID="butSend" runat="server" Text="派发" Icon="Lorry" Width="130" TabIndex="11">
<Listeners>
<Click Handler="
if(!#{txtContact}.validate() || !#{txtContactTel}.validate()) {
Ext.Msg.alert('警告','联系人或联系电话不能为空！');
return false;
}" />
</Listeners>
<AjaxEvents>
<Click OnEvent="butSend_Click">
<EventMask Msg="派发中..." ShowMask="true" MinDelay="50" />
</Click>
</AjaxEvents>
<ToolTips>
<ext:ToolTip ID="ToolTip2" runat="server" Html="派发工单" />
</ToolTips>
</ext:Button>
<ext:ComboBox ID="cboSendAddress" runat="server" AllowBlank="false" Editable="false"
FieldLabel="派发地点" EmptyText="请选择派发地点" >
<Items>
<ext:ListItem Text="南关岭" Value="Title"/>
<ext:ListItem Text="金州" Value="Coding" />
<ext:ListItem Text="泉水" Value="Keyword" />
</Items>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Body>
<ext:Panel ID="Panel5" runat="server" BodyStyle="padding:8px 2px;" >
<Body>
<ext:Panel runat="server">
<Body>
<ext:ColumnLayout runat="server">
<ext:LayoutColumn>
<ext:Panel runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 8px;">
<Body>
<ext:FormLayout runat="server" LabelWidth ="55">
<ext:Anchor>
<ext:TextField ID="txtContact" runat="server" AllowBlank="false" EmptyText="请输入联系人"
BlankText="请输入联系人!" FieldLabel="联系人" Width="120" TabIndex="20" EnableKeyEvents="true">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn>
<ext:Panel ID="Panel10" runat="server" Border="false" Header="false" BodyStyle="padding:3px 0px 0px 9px;">
<Body>
<ext:FormLayout ID="FormLayout3" runat="server" LabelWidth ="60">
<ext:Anchor>
<ext:TextField ID="txtContactTel" runat="server" AllowBlank="false" EmptyText="请输入联系电话"
BlankText="请输入联系电话!" FieldLabel="联系电话" Width="120" TabIndex="21" EnableKeyEvents="true">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn>
<ext:Panel ID="Panel2" runat="server" Border="false" Header="false" BodyStyle="padding:3px 0px 0px 9px;">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server" LabelWidth ="60">
<ext:Anchor>
<ext:ComboBox ID="cboServerType" runat="server" AllowBlank="false" Editable="false" Width="120" TabIndex="22"
FieldLabel="服务类型" EmptyText="服务类型" >
<Items>
<ext:ListItem Text="咨询" Value="Title"/>
<ext:ListItem Text="开通" Value="Coding" />
<ext:ListItem Text="续费" Value="Keyword" />
<ext:ListItem Text="搬迁" Value="Title"/>
<ext:ListItem Text="过户" Value="Coding" />
<ext:ListItem Text="暂停" Value="Keyword" />
<ext:ListItem Text="复机" Value="Title"/>
<ext:ListItem Text="报修" Value="Coding" />
<ext:ListItem Text="投诉" Value="Keyword" />
<ext:ListItem Text="注销" Value="Keyword" />
</Items>
</ext:ComboBox>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn>
<ext:Panel ID="Panel3" runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 9px;">
<Body>
<ext:FormLayout ID="FormLayout2" runat="server" LabelWidth ="60">
<ext:Anchor>
<ext:ComboBox ID="cboOkTimeLimit" runat="server" AllowBlank="false" Editable="false" Width="120" TabIndex="23"
FieldLabel="完成时限" EmptyText="完成时限" >
<Items>
<ext:ListItem Text="及时解决" Value="Title"/>
<ext:ListItem Text="半小时" Value="Coding" />
<ext:ListItem Text="两小时" Value="Keyword" />
<ext:ListItem Text="三小时" Value="Title"/>
<ext:ListItem Text="24小时" Value="Coding" />
</Items>
</ext:ComboBox>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
<ext:Panel runat="server" >
<Body>
<ext:ColumnLayout ID="ColumnLayout1" runat="server">
<ext:LayoutColumn>
<ext:Panel ID="Panel11" runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 9px;">
<Body>
<ext:FormLayout ID="FormLayout9" runat="server" LabelWidth ="55">
<ext:Anchor>
<ext:TextArea ID="txtDescription" runat="server" AllowBlank="false"
FieldLabel = "详细描述" Width="700" Height="80" TabIndex="24">
</ext:TextArea>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
</Body>
</ext:Panel>
</Body>
</ext:FormPanel>