a. 掌握获取 gridpanel 当前行的各个字段值的方法
b. 掌握如何将前台数据传递到后台，并将后台操作结果返回到前台
c. 掌握如何获取和设置 button 和 textfield 控件的文本值
主要内容
a. 我们先在页面中添加三个 ext 组件：store, menu,gridpanel
b. 将 gridpanel 的contextmenuid 设置为 menu 控件的id, 从而为gridpanel 添加右键菜单
复制代码 代码如下:
<ext:store id="store1" runat="server"
onbeforestorechanged="store1_beforestorechanged" >
<reader>
<ext:jsonreader readerid="id" >
<fields >
<ext:recordfield name="id" type="int"></ext:recordfield>
<ext:recordfield name="uid" type="string"></ext:recordfield>
<ext:recordfield name="uname" type="string"></ext:recordfield>
<ext:recordfield name="uage" type="int"></ext:recordfield>
</fields>
</ext:jsonreader>
</reader>
</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 源码如下：
复制代码 代码如下:
<ext:gridpanel id="gridpanel1" runat="server" contextmenuid="menu1" autoheight="true" width="400px"
autodatabind="true" storeid="store1">
<columnmodel id="ctl10">
<columns>
<ext:column dataindex="id" header="用户编号">
<preparecommand args="grid, record, rowindex, columnindex, value" />
</ext:column>
<ext:column dataindex="uid" header="用户名">
<preparecommand handler="" args="grid,command,record,row,col,value" formathandler="false"></preparecommand>
</ext:column>
<ext:column dataindex="uname" header="用户昵称">
<preparecommand handler="" args="grid,command,record,row,col,value" formathandler="false"></preparecommand>
</ext:column>
<ext:column dataindex="uage" header="用户年龄">
<preparecommand handler="" args="grid,command,record,row,col,value" formathandler="false"></preparecommand>
</ext:column>
</columns>
</columnmodel>
<selectionmodel>
<ext:rowselectionmodel runat="server" id="ctl09"></ext:rowselectionmodel>
</selectionmodel>
<loadmask showmask="true" msg="数据正加载中..." />
<listeners>
<cellclick fn="showuserinfo" />
</listeners>
</ext:gridpanel>
此处要作几点说明
首先,cellclick 事件传递的参数可以根据 preparecommand 中 args 设置的参数传递，比如 grid, command, record, row,col, value
其次此处的 selectionmodel 节点内定要使用 rowselectionmodel
d. 前台 extjs 脚本如下：
复制代码 代码如下:
function showuserinfo(menu, e) {
var id = gridpanel1.getselectionmodel().getselected().id;//此处的 id 为 jsonreader 中的 readerid所设置的值
var record = gridpanel1.getselectionmodel().getselected(); //获取当前选中的整条记录，前提是必须设置为行选择模式
//查看详细信息
if (menu.id == 'menuitem1') {
openuserinfowindow(record, 0); //在 objectinfo.ascx 页面中定义
}
//修改信息
else if (menu.id == 'menuitem2') {
openuserinfowindow(record, 1);
}
//添加信息
else if (menu.id == 'menuitem3') {
openuserinfowindow(record, 2);
}
else {
}
}
对于该脚本，有一点要说明，就是其中要调用 openuserinfowindow 方法，该方法在是一个用户控件的页面中定义的，本页使用该控件以后，便可调用该方法。
空间页面源码如下：
说明一点： <%= ctrid.clientid> 用户获取服务器端组件对象
复制代码 代码如下:
function openuserinfowindow(record,id) {
<%= button2.clientid %>.hide(null);
<%= txtid.clientid %>.setvalue(record.data.id);
<%= txtname.clientid %>.setvalue(record.data.uid);
<%= txtnc.clientid %>.setvalue(record.data.uname);
<%= txtage.clientid %>.setvalue(record.data.uage);
if(id==1)
{
<%= button1.clientid %>.settext('修改'); //对于 button, 取值时用 text,设置时用 settext();
<%= txtid.clientid %>.hide(null);
<%= button2.clientid %>.show(null);
}
if(id==0)
{
}
if(id==2)
{
<%= txtid.clientid %>.setvalue('');
<%= txtname.clientid %>.setvalue('');
<%= txtnc.clientid %>.setvalue('');
<%= txtage.clientid %>.setvalue('');
<%= txtid.clientid %>.hide(null);
<%= button1.clientid %>.value="添加";
}
<%= window1.clientid %>.show();
}
删除用户的代码如下：
复制代码 代码如下:
function deleteuserinfo() {
ext.msg.confirm('提示', '确定删除用户？', function(btn) {
if (btn == 'yes') {
var record = gridpanel1.getselectionmodel().getselected();
gridpanel1.getstore().remove(record);//该方法若写在后台删除成功后的回调函数中时，则 record 为 null
//用户可能只是在 gridpanel 上点击，但并没有选择确定的行，此时 record 值为 null
if (record == null) {
ext.msg.alert('提示', '请选择某一确定的记录！');
return;
}
coolite.ajaxmethods.deleteuserinfo(record.data.id.tostring(), {
success: function() {
ext.msg.alert('提示', '删除成功！');
}
});
}
else {
return;
}
});
}
请特别注意 coolite.ajaxmethods.deleteuserinfo 方法的使用，第一个参数是在前台获取，并传递到服务器端的参数，第二个是回调函数。
后台删除代码实现如下：
复制代码 代码如下:
[ajaxmethod]
public void deleteuserinfo(string id)
{
string deletestring = "delete from t_user where id=" + id;
sqldb.executeupdate(deletestring);
}
特别注意
本页面的添加，修改功能都未实现，只提供了一个模式，不过使用和删除时是一样的。
学习心得
如果有不知道什么事件传递的参数个数和类型，可以随便写个错误的方法，然后调试的时候去分析有意义的参数。
疑问：当实现删除时，实现刷新时，实现修改时，我不用重新从数据库读取数据后再绑定到 store, 而是通过刷新 store 或者 gridpanel 实现
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:)！