GridPanel and FormPanel
在Ext.Net的官方案例demo里边，有提供一个加载GridPanel行信息详情到FormPanel里边案例。
【http://examples.ext.net/#/GridPanel/Data_with_Details/Form_Details/】
但是这个案例数据加载是从由后台C#代码完成的，而且加载代码也并不简洁，很明显有些人并不喜欢这样，当然我也是这么认为的。
于是就写了下面这个案例：
（1）运行后的界面
（2）前台代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormDetails.aspx.cs" Inherits="WebTest.Pages.GridPanel.FormDetails" %>
2
3 <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 </head>
9 <body>
10 <form runat="server">
11 <ext:ResourceManager ID="ResourceManager1" runat="server">
12 </ext:ResourceManager>
13 <ext:Viewport ID="Viewport1" runat="server" Layout="border">
14 <Items>
15 <ext:GridPanel ID="GridPanel1" runat="server" Title="Employees" Margins="0 0 5 5"
16 Icon="UserSuit" Region="Center" Frame="true">
17 <Store>
18 <ext:Store ID="Store1" runat="server" OnRefreshData="Store1_Refresh">
19 <Proxy>
20 <ext:PageProxy>
21 </ext:PageProxy>
22 </Proxy>
23 <Reader>
24 <ext:JsonReader IDProperty="UserName">
25 <Fields>
26 <ext:RecordField Name="UserName" />
27 <ext:RecordField Name="UserPassword" />
28 <ext:RecordField Name="UserSex" />
29 </Fields>
30 </ext:JsonReader>
31 </Reader>
32 </ext:Store>
33 </Store>
34 <ColumnModel ID="ColumnModel1" runat="server">
35 <Columns>
36 <ext:Column DataIndex="UserName" Header="User Name" />
37 <ext:Column DataIndex="UserPassword" Header="User Password" />
38 <ext:Column DataIndex="UserSex" Header="Sex" />
39 </Columns>
40 </ColumnModel>
41 <SelectionModel>
42 <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
43 <Listeners>
44 <RowSelect Handler="#{FormPanel1}.getForm().loadRecord(record);" />
45 </Listeners>
46 </ext:RowSelectionModel>
47 </SelectionModel>
48 <BottomBar>
49 <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
50 </BottomBar>
51 <LoadMask ShowMask="true" />
52 <TopBar>
53 <ext:Toolbar runat="server">
54 <Items>
55 <ext:Button runat="server" Text="刷新" Icon="PageRefresh">
56 <Listeners>
57 <Click Handler="#{Store1}.reload();" />
58 </Listeners>
59 </ext:Button>
60 <ext:Button ID="btnDelete" runat="server" Text="删除" Icon="PageDelete">
61 <DirectEvents>
62 <Click OnEvent="btnDelete_Click" Success="#{Store1}.reload()">
63 <ExtraParams>
64 <ext:Parameter Name="Values" Value="#{GridPanel1}.getSelectionModel().getSelections().length>0?#{GridPanel1}.getSelectionModel().getSelections()[0].id:''" Mode="Raw"></ext:Parameter>
65 </ExtraParams>
66 </Click>
67 </DirectEvents>
68 </ext:Button>
69 </Items>
70 </ext:Toolbar>
71 </TopBar>
72 </ext:GridPanel>
73 <ext:FormPanel ID="FormPanel1" runat="server" Region="East" Split="true" Margins="0 5 5 5"
74 Frame="true" Title="Employee Details" Width="280" Icon="User" DefaultAnchor="100%">
75 <Items>
76 <ext:TextField ID="TextField1" runat="server" FieldLabel="User Name" DataIndex="UserName" />
77 <ext:TextField ID="TextField2" runat="server" FieldLabel="User Password" DataIndex="UserPassword" />
78 <ext:TextField ID="TextField3" runat="server" FieldLabel="Sex" DataIndex="UserSex" />
79 </Items>
80 </ext:FormPanel>
81 </Items>
82 </ext:Viewport>
83 </form>
84 </body>
85 <html>
（3）后台C#代码
View C# Code
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using Ext.Net;
8 using TestProject;
9
10 namespace WebTest.Pages.GridPanel
11 {
12 public partial class FormDetails : System.Web.UI.Page
13 {
14 UserMock mock = new UserMock();
15 protected void Page_Load(object sender, EventArgs e)
16 {
17
18 }
19
20
21 protected void Store1_Refresh(object sender, StoreRefreshDataEventArgs e)
22 {
23 this.Store1.DataSource = mock.GetModelList();
24 this.Store1.DataBind();
25 }
26
27 protected void btnDelete_Click(object sender, DirectEventArgs e)
28 {
29 string username = e.ExtraParams["Values"];
30 if (!string.IsNullOrEmpty(username))
31 {
32 X.Msg.Notify("提示", string.Format("你已删除用户：<font color='red'>{0}</font>的信息", username)).Show();
33 }
34 else
35 {
36 X.Msg.Notify("提示", "请您选择要删除的用户！").Show();
37 }
38 }
39 }
40 }
（4）其他相关代码
View UserMock Code
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Text;
5
6 namespace TestProject
7 {
8 public class UserMock
9 {
10 public List<User> GetModelList()
11 {
12 return new List<User>() { new User("zhangsan", "111", "男"), new User("lisi", "123", "女") };
13 }
14 }
15 }
View User Code
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Text;
5
6 namespace TestProject
7 {
8 [Serializable]
9 public class User
10 {
11 private string _username;
12 private string _userpwd;
13 private string _usersex;
14
15 public string UserName
16 {
17 get { return _username; }
18 set { _username = value; }
19 }
20 public string UserPassword
21 {
22 get { return _userpwd; }
23 set { _userpwd = value; }
24 }
25 public string UserSex
26 {
27 get { return _usersex; }
28 set { _usersex = value; }
29 }
30
31 public User(string strUserName, string strUserPassword, string strUserSex)
32 {
33 this.UserName = strUserName;
34 this.UserPassword = strUserPassword;
35 this.UserSex = strUserSex;
36 }
37 }
38 }
需要说明的是上面的案例里边提供了一个删除功能，主要是获取被选中行的UserName，然后作为参数传递给后台处理事件。不过本人比较喜欢的做法是针对store进行数据操作，然后通过store的OnBeforeStoreChanged后台事件提交修改。
