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>