ExtJS4.2学习(13)基于表格的扩展插件---rowEditing



前一章说了EditorGrid可编辑表格,但是有点不方便,如果数据多的话,一次性保存未免有点不太方便。下面我们来说一个扩展插件rowEditing网上许多说了不全,比如将修改的内容提交到后台的方法83B思考者日记网-束洋洋个人博客

01.jpg83B思考者日记网-束洋洋个人博客

首先,创建扩展插件方法83B思考者日记网-束洋洋个人博客

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {  
        saveBtnText: '保存',   
        cancelBtnText: "取消",   
        autoCancel: false,   
        clicksToMoveEditor: 1, //双击进行修改  1-单击   2-双击    0-可取消双击/单击事件  
        autoCancel: false,  
        listeners:{  
            edit:function(e){  
                /*var myMask = new Ext.LoadMask(Ext.getBody(), { 
                               msg: '正在修改,请稍后...', 
                               removeMask: true     //完成后移除 
                 }); 
                myMask.show();*/  
                console.info(e.context.record);  
                //e.context.record为更改的这行的数据,某个值可以用get方法,比如下面  
                var id = e.context.record.get('id'); //比如修改了id,在这里就可以获取id  
                //e.context.record.fields.items为修改的这行字段名,这是一个数组集合,e.context.record.fields.items[0].name为第一列的名称,以此类推  
                // 更新提示界面(供调试使用)  
                Ext.Msg.alert('您成功修改信息', "修改的内容是:" + e.context.record + "n 修改的字段是:"+ e.context.record.fields.items[0].name +"n 修改的id为"+id);//取得更新内容  
            }  
            //当然这里你也可以自定义一个ajax来提交到后台,大家自由发挥,这里不多写。  
        }  
    });  

 83B思考者日记网-束洋洋个人博客

grid中调用插件:83B思考者日记网-束洋洋个人博客

var grid = new Ext.grid.GridPanel({  
        title:'表格的扩展插件--行编辑',  
        width: 500,  
        height: 400,  
        renderTo: 'grid',  
        store: store,  
        columns: columns,  
        plugins: [rowEditing]  
    }); 

 83B思考者日记网-束洋洋个人博客

这里注意下,提交到后台的参数里e.context.record和e.context.record.fields方法比较重要,83B思考者日记网-束洋洋个人博客

e.context.record为更改的这行的数据,获某个值可以用get方法83B思考者日记网-束洋洋个人博客

e.context.record.fields.items为修改的这行字段名,这是一个数组集合,e.context.record.fields.items[0].name为第一列的名称,以此类推83B思考者日记网-束洋洋个人博客

 83B思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGrid83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGrid83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditing83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格83B思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field83B思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件83B思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 83B思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇283B思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解83B思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目83B思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈