zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    32.ExtJS简单的动画效果
    set、env、export差分
    【翻译】Why JavaScript Is and Will Continue to Be the First Choice of Programmers
    J2EE请求和响应—Servlet
    Leetcode: Spiral Matrix. Java
    Android正在使用Handler实现信息发布机制(一)
    Android开发工具综述,开发人员必备工具
    Android 从硬件到应用程序:一步一步爬上去 5 -- 在Frameworks蒂姆层硬件服务
    HDU 2828 DLX搜索
    2016第三周三
  • 原文地址:https://www.cnblogs.com/hailexuexi/p/1885371.html
Copyright © 2011-2022 走看看