Ext简单的一个RowEditor例子（C#）

先上图，一个很简单的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例子