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>

优质内容筛选与推荐>>
1、个人作业2——英语学习APP案例分析
2、Putty 工具 保存配置的 小技巧
3、Oracle JET mobile 入门使用
4、user 报错
5、[UE4]Background Blur,背景模糊


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号