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