先上圖，一個很簡單的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檔案程式碼如下：

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;
    }