CompositeField的应用

来源：互联网发布：家纺网络推广策划书编辑：程序博客网时间：2024/05/17 02:53

在Ext.Net使用复合表单十分容易控制表单的应用,如下图:

复合表单设计如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CompositeField.aspx.cs" Inherits="ExtNet.CompositeField" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title></title>    </head><body>    <ext:ResourceManager ID="ResourceManager1" runat="server">    </ext:ResourceManager>        <ext:FormPanel         ID="FormUserInfo"         runat="server"        Title="复合表单"        AutoHeight="true"        Width="600"        Padding="5"        DefaultAnchor="0">       <%--DefaultAnchor--%>        <Items>                    <ext:TextField ID="txtEmail" runat="server" DataIndex="Email" FieldLabel="邮件地址"  AnchorHorizontal="-20" />               <%--AnchorHorizontal:右水平缩进20px--%>            <ext:CompositeField ID="compDateRange"                 runat="server"                 MsgTarget="Side"                               FieldLabel="日期范围"                DefaultFlex="1">                <Items>                    <ext:DateField ID="dfStartDate" runat="server" FieldLabel="开始日期" DataIndex="StartDate" />                    <ext:DateField ID="dfEndate" runat="server" FieldLabel="结束日期"  DataIndex="EndDate" />                </Items>            </ext:CompositeField>            <%--MsgTarget:消息文本应该显示的位置,DefaultFlex--%>            <ext:FieldSet ID="fsDetailInfo"                 runat="server"                Title="详细"                Collapsible="true"                Layout="form">                <Items>                    <ext:CompositeField ID="compPhone"                         runat="server"                        FieldLabel="电话"                        MsgTarget="Under">                        <Items>                            <ext:DisplayField runat="server" Text="(" ID="dfPhone1" />                            <ext:TextField runat="server" DataIndex="Phone1" Width="29" AllowBlank="false"                                 ID="txtPhone1" />                            <ext:DisplayField runat="server" Text=")" ID="dfPhone2" />                            <ext:TextField runat="server" DataIndex="Phone2" Width="29" AllowBlank="false"                                 Margins="0 5 0 0" ID="txtPhone2" />                            <%--Margins:此配置只用于该组件展现在一个使用BorderLayout--%>                            <ext:TextField runat="server" DataIndex="Phone3" Width="48" AllowBlank="false"                                 ID="txtPhone3" />                        </Items>                    </ext:CompositeField>                                        <ext:CompositeField runat="server" FieldLabel="工作时间" CombineErrors="false"                         ID="ctl1197">                        <Items>                            <ext:NumberField runat="server" DataIndex="Hours" Width="48" AllowBlank="false"                                 ID="numberHours" />                            <ext:DisplayField runat="server" Text="hours" ID="dfHours" />                            <ext:NumberField runat="server" DataIndex="Minutes" Width="48"                                 AllowBlank="false" ID="numberMins" />                            <ext:DisplayField runat="server" Text="mins" ID="dfMins" />                        </Items>                    </ext:CompositeField>                                        <ext:CompositeField                         runat="server"                        AnchorHorizontal="-20"                        MsgTarget="Side"                        FieldLabel="全名" ID="compFullName">                        <Items>                            <ext:ComboBox                                 runat="server"                                Width="50"                                Editable="false"                                DataIndex="Title" ID="txtMr" >                                                            <Items>                                    <ext:ListItem Text="Mr" Value="mr" />                                    <ext:ListItem Text="Mrs" Value="mrs" />                                    <ext:ListItem Text="Miss" Value="miss" />                                </Items>                                <SelectedItem Value="mr" />                            </ext:ComboBox>                             <%--  --SelectedItem Value="mr"-  --%>                                                <ext:TextField runat="server" Flex="1" DataIndex="FirstName" AllowBlank="false"                                 ID="txtFirtName" />                                                        <ext:TextField runat="server" Flex="1" DataIndex="LastName" AllowBlank="false"                                 ID="txtLastName" />                        </Items>                    </ext:CompositeField>                </Items>            </ext:FieldSet>        </Items>                <Buttons>            <ext:Button runat="server" Text="装载数据" ID="btnLoadData" >                <DirectEvents>                    <Click OnEvent="LoadData" />                </DirectEvents>            </ext:Button>                        <ext:Button runat="server" Text="保存" ID="btnSave">                               <DirectEvents>                    <Click OnEvent="SaveData" Before="return #{FormUserInfo}.isValid();">                        <ExtraParams>                            <ext:Parameter Name="values" Value="#{FormUserInfo}.getForm().getValues()" Mode="Raw" Encode="true" />                        </ExtraParams>                    </Click>                </DirectEvents>            </ext:Button>                        <ext:Button runat="server" Text="重置" ID="btnRest">                <Listeners>                           <%-- EXT.NET里面，Listeners(配置多个事件监听器)事件都有Handler属性 ,在Handler属性里面写脚本--%>                    <Click Handler="#{FormUserInfo}.getForm().reset();" />                </Listeners>            </ext:Button>        </Buttons>    </ext:FormPanel></body></html>

后台代码:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Text;using Ext.Net;namespace ExtNet{    public partial class CompositeField : System.Web.UI.Page    {        protected void LoadData(object sender, DirectEventArgs e)        {            FormUserInfo.SetValues(new            {                Email = "ed@extjs.com",                Title = "mr",                FirstName = "Abraham",                LastName = "Elias",                StartDate = new DateTime(2003, 1, 10),                EndDate = new DateTime(2009, 12, 11),                Phone1 = 555,                Phone2 = 123,                Phone3 = 4567,                Hours = 7,                Minutes = 15            });                    }        protected void SaveData(object sender, DirectEventArgs e)        {            var values = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["values"]);            StringBuilder sb = new StringBuilder();            foreach (var value in values)            {                sb.AppendFormat("{0} = {1}<br />", value.Key, value.Value);            }             X.Msg.Alert("Values", sb.ToString()).Show();            //X.Msg.Alert("Values", txtEmail.Text).Show();       }    }}