【原创】Extjs4 通用CURD方法
<script> /** * Author:xiaojiang * create_time: 2012-06-01 * reason: 通用curd 方法 * */ Ext.define("App.util.CommonDoActionUtil",{ /** * Form添加信息 合并insert 和 update 功能 * @parse form {} 对应form * @parse parse {} * parse.grid {} 要刷新的grid * parse.pk string 对应form的主键ID 默认为id * parse.callback function 执行后的回调函数 * */ doInsert:function(form,parseObj){ if(!form){ alert("Invalid arguments"); return; } _form = form.getForm(); if (_form.isValid()) { var pk = parseObj.pk || 'id'; //取得对应主键 var type = form.getValues()[pk] ? 'update' :'insert'; var url = parseObj.grid.getStore().getProxy().api[type]; if(url == undefined) { console.dir('Invalid url'); return; } form.submit({ url: url, submitEmptyText: false, waitMsg: '提交...', success: function(form, action) { var ret = eval('('+action.response.responseText+')'); Ext.Msg.alert('提示', ret.message); form.reset(); if(parseObj.grid != undefined) parseObj.grid.store.load(); if(typeof (parseObj.callback) == 'function') parseObj.callback(_form); //调用回调函数 }, failure: function(form, action) { var ret = eval('('+action.response.responseText+')'); Ext.Msg.alert('提示', ret.message); } }); } }, // -- grid begin -- /** * 删除grid 选择信息 * @parse {} 对应grid * @parse { * .pk string 对应form的主键ID 默认为id * .Msg 1 是否 不显示弹出信息 * } * */ doDelete:function(grid,ParseObj){ if(!grid){ alert("Invalid arguments"); return; } var pk = (ParseObj !=undefined && ParseObj.pk) ? ParseObj.pk : 'id'; //取得对应主键 var Msg = (ParseObj !=undefined && ParseObj.Msg != undefined) ? ParseObj.Msg : '确定要删除此记录吗'; var store = grid.getStore(); //得到数据集合 var records = grid.getSelectionModel().getSelection(); var data = []; var Parse = {}; Ext.Array.each(records,function(model){ data.push(model.get(pk)); }); Parse[pk] = data.join(","); //存入参数 if(data.length > 0){ if(Msg){ //判断是否需要弹出确认框 Ext.MessageBox.confirm("提示",Msg,function(btn){ if(btn == 'yes'){ Ext.Ajax.request({ url:store.getProxy().api['remove'], params:Parse, timeout:4000, success:function(response,opts){ var ret = eval("("+response.responseText+")"); Ext.Msg.alert("提示", ret.message); grid.store.load(); } }) } }); }else{ Ext.Ajax.request({ url:store.getProxy().api['remove'], params:Parse, timeout:4000, success:function(response,opts){ var ret = eval("("+response.responseText+")"); Ext.Msg.alert("提示", ret.message); grid.store.load(); } }) //待优化 } }else{ Ext.Msg.alert("提示", "请选择一条信息"); } }, /** * 树形删除操作 * @param {} Tree 要操作的树 * @param string pkv 唯一标识值 * @param string pk 唯一标识pk */ doDeleteT: function(Tree,pkv,pk,callback){ if(!Tree || !pkv) return; var me = this, param ={},url = Tree.getStore().getProxy().api['remove']; //得到数据集合 param[pk] = pkv; //设置参数 Ext.Ajax.request({ url: url, params: param, success: function(response , opt){ var node = me.getNodeByPk(Tree,pkv,pk); var parentNode = node.parentNode; try{ if(parentNode){ parentNode.removeChild(node); if(!parentNode.getChildAt(0)){ parentNode.data['leaf'] = true; parentNode.updateInfo({leaf:true}); } } }catch(e){ console.log(e); } if(typeof(callback) == 'function') callback(response); //执行回调函数 var ret = eval("("+response.responseText+")"); Ext.Msg.alert("提示",ret.message); } }); }, /** * 树形维护插入/更新操作 * @param {} tree * @param { * pk : 主键id * pid : 父级标识(pid) * param : 插入/更细数据 * callback: 回调函数(插入成功后的id) * } */ doInsertT: function(tree,paramObj){ var me = this; if(!tree){ alert("参数传递不正确"); return; } var pk = paramObj.pk || 'id',parseObj = paramObj.param; //取得对应主键 var type = parseObj[pk] ? 'update' :'insert'; //更新/插入数据 Ext.Ajax.request({ url: tree.getStore().getProxy().api[type], params:parseObj, submitEmptyText: false, waitMsg: '提交...', success: function(res, action) { var ret = eval('('+res.responseText+')'); var ret_arr = ret.message.split('-'); if('update' == type){ var Node = me.getNodeByPk(tree,parseObj[pk],pk); var _Node = Node; _Node.data = Ext.apply(_Node.data,parseObj); Node.parentNode.replaceChild(_Node,Node); //更新节点 }else if('insert' == type){ var pid = paramObj.pid || 'pid' ,pidVal = parseObj[pid]; var parentNode = me.getNodeByPk(tree,pidVal,pk); var resObj = Ext.applyIf({ id : ret_arr[1], text:parseObj["text"], leaf:true },parseObj); if(resObj[pk] == '') resObj[pk] = ret_arr[1]; // 当主键为返回型时 if(parentNode){ // 判断是否有父级节点 try{ parentNode.data['leaf'] = false; parentNode.updateInfo(); //设置为parentNode 添加元素 parentNode.appendChild(resObj); parentNode.expand(); }catch(e){ console.dir(e); } }else{ //无父节点 ,即为根节点 var rootNode = tree.getStore().getRootNode(); rootNode.appendChild(resObj); } } Ext.Msg.alert('提示', ret_arr[0]); if(typeof (paramObj.callback) == 'function') paramObj.callback(ret_arr[1]); //调用回调函数 }, failure: function(form, action) { var ret = eval('('+action.response.responseText+')'); Ext.Msg.alert('提示', ret.message); } }); }, /** * 通过主键获取Node * @param {} treeObj * @param string pkv 主键值 * @param string pk 主键标识 */ getNodeByPk:function(tree,pkv,pk){ if('id' == pk){ //默认pk var Node = tree.getStore().getNodeById(pkv); }else{ //若不是id则循环查找节点 for(i in tree.getStore().tree.nodeHash){ if(pkv == tree.getStore().tree.nodeHash[i].data[pk]){ Node = tree.getStore().tree.nodeHash[i]; break; } } } return Node; } }); </script>
思想是基于uspcat 的,改成自己项目需要的。。。
只要思路是把对grid 和Tree的操作封装到uitl 里面。类似java的Service 层 技术上不是很复杂。大家可以针对各自应用自行修改
使用方法:
<script> //在controller 的init 方法里添加 var me = this; me.DoAction = Ext.create('App.util.CommonDoActionUtil');//加载通用CURD //在对应的方法中调用 'userListX button[id=delUser]':{ click:function(o){ var grid = o.ownerCt.ownerCt; me.DoAction.doDelete(grid); } } //删除用户 </script>
生命只有一次。