问题描述

ExtJs可编辑表格自动保存

我用的extjs3.5，想在表格上直接修改字段自动保存。使用EditorGridPanel，设置了可编辑属性，然而点击后没有效果，只是选中了整行，复选框被选中。我看网上的样例都是在afterEdit这个事件中对记录进行更新，可是我看api，这个事件是在每个单元格被编辑后都触发的，也就是我改一个字段就会提交一次，那么，没有别的自动保存方案么？比如切换到下一行时，上一行去发起ajax请求保存

解决方案

需要一个celledit的插件，这是一个例子：

Ext.onReady(function(){
    //定义列
    var columns = [
        {header:'编号',dataIndex:'id',width:50,
            editor:{
                allowBlank:true
            }}, //sortable:true 可设置是否为该列进行排序
        {header:'名称',dataIndex:'name',width:80,
                editor:{
                    allowBlank:true
                }},
        {header:'描述',dataIndex:'descn',width:112,
                    editor:{
                        allowBlank:true
                    }}
      ];
    //定义数据
    var data =[
        ['1','小王','描述01'],
        ['2','李四','描述02'],
        ['3','张三','描述03'],
        ['4','束洋洋','思考者日记网'],
        ['5','高飞','描述05']
    ];
    //转换原始数据为EXT可以显示的数据
    var store = new Ext.data.ArrayStore({
        data:data,
        fields:[
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
           {name:'name'},
           {name:'descn'}
        ]
    });
    //加载数据
    store.load();  

    //创建表格
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid', //渲染位置
        width:550,
        autoHeight:true,
        store:store,
        columns:columns, //显示列
        stripeRows:true, //斑马线效果
        selType: 'cellmodel',
        plugins:[
                 Ext.create('Ext.grid.plugin.CellEditing',{
                     clicksToEdit:1 //设置单击单元格编辑
                 })
        ],
        tbar:['-',{
            text:'添加一行',
            handler:function(){
                var p ={
                        id:'',
                        name:'',
                        descn:''
                        };
                    store.insert(0,p);
                }
            },'-',{
                text:'删除一行',
                handler:function(){
                    Ext.Msg.confirm('系统提示','确定要删除？',function(btn){
                        if(btn=='yes'){
                            var sm = grid.getSelectionModel();
                            var record = sm.getSelection()[0];
                            store.remove(record);
                        }
                    });
                }
        },'-',{
            text:'保存',
            handler:function(){
                var m = store.getModifiedRecords().slice(0);
                var jsonArray = [];
                Ext.each(m,function(item){
                    jsonArray.push(item.data);
                });
                Ext.Ajax.request({
                    method:'POST',
                    url:'/ExtJs4.2Pro/EditGridServlet',
                    success:function(response){
                        Ext.Msg.alert('系统提示',response.responseText,function(){
                            store.load();
                        });
                    },
                    failure:function(){
                        Ext.Msg.alert("错误","与后台联系的时候出了问题。");
                    },
                    params:'data='+encodeURIComponent(Ext.encode(jsonArray))
                });
            }
        }]
    });
});