- 主要目的
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 当前行值并传递到后台
最新推荐文章于 2019-03-06 11:30:39 发布