先上图,一个很简单的RowEditor的实现,如下图所示:
此实现,是根据ext-3.2.0/ux/RowEditor.js实现的,具体代码如下:
页面引用东西如下:
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/ux/css/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/ux/css/RowEditor.css" />
<style type="text/css">
.icon-user-add
{
background-image: url(../ext-3.2.0/shared/icons/fam/user_add.gif) !important;
}
.icon-user-delete
{
background-image: url(../ext-3.2.0/shared/icons/fam/user_delete.gif) !important;
}
</style>
<script type="text/javascript" language="javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" src="../ext-3.2.0/ext-all.js"></script>
<script language="javascript" src="../ext-3.2.0/ux/RowEditor.js"></script>
<script type="text/javascript" language="javascript" src="../Js/roweditor.js"></script>
其中:样式里面的两个图片是“增加”,“删除”两个按钮前面的图片。最后一个JS文件为实现文件。
JS文件代码如下:
Ext.BLANK_IMAGE_URL = '../../ext-3.2.0/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
//数据源reader对象
var Dwlb = Ext.data.Record.create([
{name: 'XH',type: 'string'},
{name: 'LBMC',type: 'string'}
]);
//数据源
var proxy = new Ext.data.HttpProxy({
method:'GET',
url:'RowEditor.aspx?action=get'
});
//在页面上的操作直接影响store,根据store的'update','remove'两个监听事件,向后台提交数据,实现交互
var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
fields: Dwlb,
root:'data'
}),
proxy:proxy,
autoLoad:true
,listeners:{
'update':function(sto,record,operation){
var Dwlb=sto.getAt(sto.indexOf(record)).data;
if(operation==Ext.data.Record.EDIT&&Dwlb.LBMC!=''&&Dwlb.LBMC!=null){
Ext.Ajax.request({
url:'Dwlb.aspx?action=update',
params:{'XH':Dwlb.XH,'LBMC':Dwlb.LBMC},
success:function(response,opts){
var obj=Ext.util.JSON.decode(response.responseText);
store.reload();
if(!obj.success)
Ext.Msg.alert('提示',obj.msg);
},
failure:function(response,opts){
Ext.Msg.alert('错误','保存错误')
sto.removeAt(0);
}
});
}
}
,'remove':function(sto,record,index){
if(record.get('XH')!=''&&record.get('XH')!=null){
Ext.Ajax.request({
url:'RowEditor.aspx?action=del',
params:{'xh':record.data.XH},
success:function(response,opts){
var obj=Ext.util.JSON.decode(response.responseText);
if(!obj.success)
{
Ext.Msg.alert('提示',obj.msg);
store.insert(index,record)
}
},
failure:function(response,opts){
Ext.Msg.alert('错误','保存错误');
store.insert(index,record)
}
});
}
}
}
});
//编辑行控件,在下面的grid中引用
var editor = new Ext.ux.grid.RowEditor({
saveText: '保存',
cancelText:'取消'
});
var grid = new Ext.grid.GridPanel({
store: store,
width: 400,
region:'center',
margins: '0 5 5 5',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: '添加',
handler: function(){
var e = new Dwlb({
XH: '',
LBMC: ' '
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '删除',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],
columns: [
new Ext.grid.RowNumberer(),
{
header: '类别名称',
dataIndex: 'LBMC',width: 200,sortable: true,
editor: { xtype: 'textfield',allowBlank: false }
}
]
});
var layout = new Ext.Panel({
layout: 'border',
title: '队伍级别维护',
layoutConfig: {
columns: 1
},
width:250,
height: 300,
items: [grid]
});
layout.render('Cont');
grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});
后台代码实现如下:
protected void Page_Load(object sender, EventArgs e)
{
string action = Request.Params["action"];
string strResponse = "";
string xh = Request.Params["XH"];
string lbmc = Request.Params["LBMC"];
switch (action)
{
case "get":
//获得JSON源数据的方法就不写了
strResponse = "{data:[{XH:'1',LBMC:'消防'},{XH:'2',LBMC:'医疗'},{XH:'3',LBMC:'其它'}]}";
Response.Write(strResponse);
Response.End();
break;
case "update":
strResponse = saveYalb(xh, lbmc);
Response.Write(strResponse);
Response.End();
break;
case "del":
strResponse = delYalb(xh);
Response.Write(strResponse);
Response.End();
break;
default:
break;
}
}
//保存
private string saveYalb(string xh, string mc)
{
string result = "";
string sql = "xxxx";
try
{
//数据库操作方法,此处省略
result = "{success:true,msg:'保存成功'}";
}
catch (Exception)
{
result = "{success:false,msg:'保存出现错误!'}";
}
return result;
}
//删除
private string delYalb(string xh)
{
string result = "";
string sql = string.Format("xxxx where xh='{0}'", xh);
try
{
//数据库操作方法,此处省略
result = "{success:true,msg:'操作成功'}";
}
catch (Exception)
{
result = "{success:false,msg:'操作失败'}";
}
return result;
}
这是例子的简单实现的链接 RowEditor例子