Extjs4 RowEditing 的使用和更新方法

如何灵活快速的掌握RowEditing组件的应用，应大家的要求，今天给大家具体讲下该组件的使用。

1、创建

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
            pluginId:'rowEditing',
            saveBtnText: '保存',
            cancelBtnText: "取消",
            autoCancel: false,
            clicksToEdit:2   //双击进行修改  1-单击   2-双击    0-可取消双击/单击事件
});

2、定义使用插件

Ext.define('SubBody_Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.SubBody_Grid',
        collapsible: false,
        iconCls: 'icon-grid',
        //frame: true,           //显示Grid整个框架
        height: window.innerHeight,
        border: true,
        loadMask: true,
        columnLines: true,    //显示列线
        selType: 'rowmodel',
        plugins: [rowEditing],      //定义使用插件

columns: [
             {
                dataIndex: "Partno",
                width: 100,
                sortable: true,
                //flex: 1        // grid宽度减去固定列宽以后占一份；
                text: '物料编号'
            }, {
                dataIndex: "PurQty",
                width: 70,
                editor: 'numberfield',                    //在需要更改的字段设置编辑，并指明类型
                renderer: Ext.util.Format.numberRenderer('0.00'),
                align: 'right',
                sortable: true,
                text: '采购数量'
            }, {
                dataIndex: "DeliveryDate",
                width: 90,
                renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                editor: 'datefield',
                align: 'right',
                sortable: true,
                text: '交期'
。。。。。。。。。。。以下省略。。。。。。。。

3、定义保存更新事件

以上就定义完成了。但如何进行更改后的保存呢？？？

不管是添加还是修改，保存用的事件都是是grid的edit事件

可用两种方式来定义edit事件！！！！

1、在创建时定义方式：

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
            pluginId:'rowEditing',
            saveBtnText: '保存',
            cancelBtnText: "取消",
            autoCancel: false,
            clicksToEdit:2   //双击进行修改  1-单击   2-双击    0-可取消双击/单击事件

listeners:{
                edit:function(e){
                    var myMask = new Ext.LoadMask(Ext.getBody(), {
                                   msg: '正在修改，请稍后...',
                                   removeMask: true     //完成后移除
                      });
                      myMask.show();
                    var id = e.record.get('Item');               
                      // 更新提示界面(供调试使用)
                      Ext.Msg.alert('您成功修改信息', "被修改的内容是:" + e.record.get("Item") + "\n 修改的字段是:"+ e.field +"\n 对应的id为"+id);//取得更新内容
                      Ext.Ajax.request({
                          url: '/ashx/erp/purchase/PO_Form_BodySub_Upd.ashx',
                          params: {
                            PONum:e.record.get('PONum'),
                            Item:e.record.get('Item'),
                            PurQty:e.record.get('PurQty'),
                            DeliveryDate:e.record.get('DeliveryDate')
                          },
                          success: function(response){
                            var result = Ext.decode(response.responseText);
                              if(result.succeed){
                                e.record.commit();
                                //隐藏
                                myMask.hide();
                                Ext.Msg.show({
                                title:'操作提示',
                                msg: result.msg,
                                buttons: Ext.Msg.YES,
                                icon: Ext.Msg.WARNING
                                });  
                               }else{
                                myMask.hide();
                                Ext.Msg.show({
                                title:'操作提示',
                                msg: result.msg,
                                buttons: Ext.Msg.YES,
                                icon: Ext.Msg.WARNING
                                });
                               }
                            },
                            failure: function (response, opts) {   
                        Ext.Msg.show({
                               title:'操作提示',
                               msg: '修改失败',
                               buttons: Ext.Msg.YES,
                               icon: Ext.Msg.WARNING
                               });   
                        }
                      })
                }
            }
});

2、定义时不定义，之后进行再添加事件的方式

PO_SubPart_Grid.on("edit", afterEdit);
function afterEdit(e) {
  var myMask = new Ext.LoadMask(Ext.getBody(), {
    msg: '正在修改，请稍后...',
    removeMask: true //完成后移除
    });
    myMask.show();
  var id = e.record.get('Item');              
    Ext.Msg.alert('您成功修改了信息', "被修改的内容是:" + e.record.get("Item") + "\n 修改的字段是:"+ e.field +"\n 对应的id为"+id);//取得更新内容
    Ext.Ajax.request({
        url: '/ashx/erp/purchase/PO_Form_BodySub_Upd.ashx',
        params: {
          PONum:e.record.get('PONum'),
          Item:e.record.get('Item'),
          PurQty:e.record.get('PurQty'),
          DeliveryDate:e.record.get('DeliveryDate')
        },
        success: function(response){
          var result = Ext.decode(response.responseText);
            if(result.succeed){
              e.record.commit();
              //隐藏
              myMask.hide();
              Ext.Msg.show({
              title:'操作提示',
              msg: result.msg,
              buttons: Ext.Msg.YES,
              icon: Ext.Msg.WARNING
              });  
             }else{
              myMask.hide();
              Ext.Msg.show({
              title:'操作提示',
              msg: result.msg,
              buttons: Ext.Msg.YES,
              icon: Ext.Msg.WARNING
              });
             }
          },
          failure: function (response, opts) {   
      Ext.Msg.show({
             title:'操作提示',
             msg: '修改失败',
             buttons: Ext.Msg.YES,
             icon: Ext.Msg.WARNING
             });   
      }
    })
};