Coolite 中前台获取 GridPanel 当前选择行值(转)

主要目的

a. 掌握获取 GridPanel 当前行的各个字段值的方法
b. 掌握如何将前台数据传递到后台，并将后台操作结果返回到前台
c. 掌握如何获取和设置 button 和 textField 控件的文本值
主要内容

a. 我们先在页面中添加三个 ext 组件：store, menu,gridpanel

b. 将 gridpanel 的contextmenuID 设置为　menu 控件的ID, 从而为GridPanel 添加右键菜单
代码
1 < ext:Store ID = " Store1 " runat = " server "
2 onbeforestorechanged = " Store1_BeforeStoreChanged " >
3 < Reader >
4 < ext:JsonReader ReaderID = " id " >
5 < Fields >
6 < ext:RecordField Name = " id " Type = " Int " ></ ext:RecordField >
7 < ext:RecordField Name = " uid " Type = " String " ></ ext:RecordField >
8 < ext:RecordField Name = " uname " Type = " String " ></ ext:RecordField >
9 < ext:RecordField Name = " uage " Type = " Int " ></ ext:RecordField >
10 </ Fields >
11 </ ext:JsonReader >
12 </ Reader >
13 </ ext:Store >
此处的 ReaderID 可以不设置，设置了的话，就可以使用方法 GridPanel1.getSelectionModel().getSelected().id 来获取该行 id 字段所对应的值。
使用该方法的前提是在GridPanel 中设置其选择方式为行选择模式，代码会在后面贴出。Name 对应于数据库表中的字段名。
< ext:Menu ID = " Menu1 " runat = " server " >
< Items >
< ext:MenuItem ID = " MenuItem1 " runat = " server " Text = " 查看用户信息 " >
< Listeners >
< Click Fn = " ShowUserInfo " />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID = " MenuItem2 " runat = " server " Text = " 修改用户信息 " >
< Listeners >
< Click Fn = " ShowUserInfo " />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID = " MenuItem3 " runat = " server " Text = " 添加用户信息 " >
< Listeners >
< Click Fn = " ShowUserInfo " />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID = " MenuItem4 " runat = " server " Text = " 删除用户信息 " >
< Listeners >
< Click Fn = " DeleteUserInfo " />
</ Listeners >
</ ext:MenuItem >
</ Items >
</ ext:Menu >
效果如下：

c. 将 gridPanel 的 storeID 设为 store 控件的 ID, 为 Gridpanel 添加数据源

GridPanel 源码如下：
1 < ext:GridPanel ID = " GridPanel1 " runat = " server " ContextMenuID = " Menu1 " AutoHeight = " true " Width = " 400px "
2 AutoDataBind = " true " StoreID = " Store1 " >
3
4 < ColumnModel ID = " ctl10 " >
5 < Columns >
6 < ext:Column DataIndex = " id " Header = " 用户编号 " >
7 < PrepareCommand Args = " grid, record, rowIndex, columnIndex, value " />
8 </ ext:Column >
9 < ext:Column DataIndex = " uid " Header = " 用户名 " >
10 < PrepareCommand Handler = "" Args = " grid,command,record,row,col,value " FormatHandler = " False " ></ PrepareCommand >
11 </ ext:Column >
12 < ext:Column DataIndex = " uname " Header = " 用户昵称 " >
13 < PrepareCommand Handler = "" Args = " grid,command,record,row,col,value " FormatHandler = " False " ></ PrepareCommand >
14 </ ext:Column >
15 < ext:Column DataIndex = " uage " Header = " 用户年龄 " >
16 < PrepareCommand Handler = "" Args = " grid,command,record,row,col,value " FormatHandler = " False " ></ PrepareCommand >
17 </ ext:Column >
18 </ Columns >
19 </ ColumnModel >
20 < SelectionModel >
21 < ext:RowSelectionModel runat = " server " ID = " ctl09 " ></ ext:RowSelectionModel >
22 </ SelectionModel >
23 < LoadMask ShowMask = " true " Msg = " 数据正加载中... " />
24 < Listeners >
25 < CellClick Fn = " ShowUserInfo " />
26 </ Listeners >
27 </ ext:GridPanel >
此处要作几点说明
首先,cellclick 事件传递的参数可以根据 PrepareCommand 中 Args 设置的参数传递，比如 grid, command, record, row,col, value
其次此处的 SelectionModel 节点内定要使用 RowSelectionModel

d. 前台 extjs 脚本如下：
1 function ShowUserInfo(menu, e) {
2 var id = GridPanel1.getSelectionModel().getSelected().id; // 此处的 id 为 jsonreader 中的 readerID所设置的值
3 var record = GridPanel1.getSelectionModel().getSelected(); // 获取当前选中的整条记录，前提是必须设置为行选择模式
4
5 // 查看详细信息
6 if (menu.id == ' MenuItem1 ' ) {
7 openUserInfoWindow(record, 0 ); // 在 objectInfo.ascx 页面中定义
8 }
9 // 修改信息
10 else if (menu.id == ' MenuItem2 ' ) {
11 openUserInfoWindow(record, 1 );
12 }
13 // 添加信息
14 else if (menu.id == ' MenuItem3 ' ) {
15 openUserInfoWindow(record, 2 );
16 }
17 else {
18
19 }
20 }
对于该脚本，有一点要说明，就是其中要调用 openUserInfoWindow 方法，该方法在是一个用户控件的页面中定义的，本页使用该控件以后，便可调用该方法。
空间页面源码如下：
说明一点： <%= ctrID.ClientID> 用户获取服务器端组件对象
1 function openUserInfoWindow(record,id) {
2 <%= Button2.ClientID %> .hide( null );
3 <%= txtID.ClientID %> .setValue(record.data.id);
4 <%= txtName.ClientID %> .setValue(record.data.uid);
5 <%= txtNC.ClientID %> .setValue(record.data.uname);
6 <%= txtAge.ClientID %> .setValue(record.data.uage);
7 if (id == 1 )
8 {
9 <%= Button1.ClientID %> .setText( ' 修改 ' ); // 对于 button, 取值时用 text,设置时用 setText();
10 <%= txtID.ClientID %> .hide( null );
11 <%= Button2.ClientID %> .show( null );
12 }
13 if (id == 0 )
14 {
15
16 }
17 if (id == 2 )
18 {
19 <%= txtID.ClientID %> .setValue( '' );
20 <%= txtName.ClientID %> .setValue( '' );
21 <%= txtNC.ClientID %> .setValue( '' );
22 <%= txtAge.ClientID %> .setValue( '' );
23 <%= txtID.ClientID %> .hide( null );
24 <%= Button1.ClientID %> .value = " 添加 " ;
25
26 }
27 <%= Window1.ClientID %> .show();
28 }
删除用户的代码如下：
1 function DeleteUserInfo() {
2 Ext.Msg.confirm( ' 提示 ' , ' 确定删除用户？ ' , function (btn) {
3 if (btn == ' yes ' ) {
4 var record = GridPanel1.getSelectionModel().getSelected();
5 GridPanel1.getStore().remove(record); // 该方法若写在后台删除成功后的回调函数中时，则 record 为 null
6 // 用户可能只是在 gridpanel 上点击，但并没有选择确定的行，此时 record 值为 null
7 if (record == null ) {
8 Ext.Msg.alert( ' 提示 ' , ' 请选择某一确定的记录！ ' );
9 return ;
10 }
11 Coolite.AjaxMethods.DeleteUserInfo(record.data.id.toString(), {
12 success: function () {
13
14 Ext.Msg.alert( ' 提示 ' , ' 删除成功！ ' );
15 }
16 });
17 }
18 else {
19 return ;
20 }
21 });
22 }
请特别注意 Coolite.AjaxMethods.DeleteUserInfo 方法的使用，第一个参数是在前台获取，并传递到服务器端的参数，第二个是回调函数。
后台删除代码实现如下：
1 [AjaxMethod]
2 public void DeleteUserInfo(string id)
3 {
4 string deletestring = " delete from T_User where id= " + id;
5 sqldb.ExecuteUpdate(deletestring);
6 }
特别注意
本页面的添加，修改功能都未实现，只提供了一个模式，不过使用和删除时是一样的。
学习心得
如果有不知道什么事件传递的参数个数和类型，可以随便写个错误的方法，然后调试的时候去分析有意义的参数。
疑问：当实现删除时，实现刷新时，实现修改时，我不用重新从数据库读取数据后再绑定到 Store, 而是通过刷新 Store 或者 GridPanel 实现

Coolite 中前台获取 GridPanel 当前选择行值(转)

相关文章

多语言资源文件制作工具

HTTP协议那些事儿

jinkens 环境准备

《Microsoft Sql server 2008 Internals》读书笔记--第八章The Query Optimizer(7)

网路游侠：笑谈——关于UTM和IPS的“亮点”

HTML accessKey约定俗成的标准

RF持续集成到jekins

构建LAMP网站应用系统