CompositeField的应用

最新推荐文章于 2022-01-13 17:25:01 发布

rockywu

最新推荐文章于 2022-01-13 17:25:01 发布

阅读量2.7k

点赞数

分类专栏： ExtNet 文章标签： server ext button assembly flex xhtml

本文链接：https://blog.csdn.net/rockywu/article/details/7051011

版权

ExtNet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在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();
       }
    }
}

rockywu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CompositeField的应用

在Ext.Net使用复合表单十分容易控制表单的应用,如下图:复合表单设计如下: <ext:FormPanel ID="FormUserInfo" runat="server" Title="复合表单" Auto
复制链接

扫一扫

专栏目录