extjs4mvc增删改查_成功搞定一个通用的Extjs增删改查模块

最近研究Extjs ， 发现经常用的是数据表的增删改查，每次都需要重新写panel，很费劲，于是想写一个通用的Extjs增删改查模块。模块又如下几个部分组成。

入口函数如下：

functiongetADES(dataliststr, url, searchstr, idpanel, namepanel,mainIndex) {var tstore =getStore(url, dataliststr);

tstore.load({ params: { start:0, limit: 10} });var grid = newExt.grid.GridPanel({

height:300,

width:400,

store: tstore,

id:idpanel,

loadMask:true,

trackMaskOver:true,

cm: getCM(dataliststr),

bbar: getPTB(dataliststr, searchstr,url, idpanel,namepanel,mainIndex)

});//Ext.getCmp(idpanel).reload();

var userPanel = newExt.Panel({

title:namepanel,

items:grid,

layout:'fit',

region:'center',

collapsible:true,

loadMask:{msg:'wait......'}

});returnuserPanel;

};

简单说明一下：dataliststr ，封装我们需要的数据表字段 ，比如'ID,name,department'.组织成这样的结构，url，是我们获取数据的地址，searchstr,是我们搜索框中需要搜索的字段。idpanel是我们这个gridpanel需要的id，namepanel是我们窗体的名字。mainIndex，是我们数据表的主键字段，删除的时候需要。

首先，我们需要获得一个store。代码如下：

functiongetStore(url, dataliststr) {var columns = newArray();var colarr = dataliststr.split(',');for (var i = 0; i < colarr.length; i++) {

columns.push({

name: colarr[i],

type:'string'});

}var tmpRecord = newExt.data.Record.create(columns);var store = newExt.data.Store({

proxy:newExt.data.HttpProxy({

url:url+"?cmd=list",

method:'GET'}),

remoteSort:true,

reader:newExt.data.JsonReader({

root:"results"//,

//totalProperty:'totalCount'

},tmpRecord)

});returnstore;

}

后台代码如下：

public partial classView_usermanage_proCate : System.Web.UI.Page

{private static ProCateManager pcManager = newProCateManager();public string JsonTest = "";protected void Page_Load(objectsender, EventArgs e)

{string cmd = Request.QueryString["cmd"];/*List columns = new List();

columns.Add("CateID");

columns.Add("ProCate");

string results = pcManager.getAllProCate(columns, 0, 10);

JsonTest = results;*/

if (cmd.Equals("list"))

{

List columns = new List();

columns.Add("CateID");

columns.Add("ProCate");int start = int.Parse(Request.Params["start"]);int limit = int.Parse(Request.Params["limit"]);string results =pcManager.getAllProCate(columns, start, limit);

JsonTest=results;

Response.Write(results);

Response.End();

}if (cmd.Equals("add"))

{string cate = Request.Params["ProCate"];

pcManager.addProCate(cate);

Response.Write("{success:true}");

Response.End();

}if (cmd.Equals("edit"))

{

Response.Write("can't edit");

Response.End();

}if (cmd.Equals("del"))

{string id = Request.Params["uid"];string[] re = id.Split(',');foreach (string t inre)

{

pcManager.DelProcate(t);

}

Response.Write("{success:true}");

Response.End();

}

}

}

因为重点不是后台，数据组织形式，我们用json的方式组织，具体根据实际的情况大家自己组织后台。

继续讲前台代码，我们有store之后，需要构造gridPanel的cm结构。代码如下：

functiongetCM(dataliststr) {var columns = newArray();//columns.push(new Ext.grid.RowNumberer());

var colarr = dataliststr.split(',');for (var i = 0; i < colarr.length; i++) {

columns.push({

header:getStr(colarr[i]),

dataIndex:colarr[i]

});

}var columnMode = newExt.grid.ColumnModel(

columns);returncolumnMode;

};

具体的就是，解析我们的dataliststr这个字符创，从而构造出相应的column结构。

最后，还剩下重中之重，pagingToolbar。这个里面含有增删改查

代码如下

functiongetPTB(dataliststr, searchstr, url, idpanel, namepanel,mainIndex) {var pagingToolbar = newExt.PagingToolbar({

pageSize:10,

displayInfo:true,

store: store,

displayMsg:'show records {0} to {1}, total {2} records',

emptyMsg:'no data record',

items: [{

text: getStr('id_add'),

handler:function(arg1, arg2, arg3, arg4) {

add(dataliststr, url, idpanel, namepanel);

}

}, {

text: getStr('id_edit'),

handler:function(arg1, arg2, arg3, arg4) {

edit(dataliststr, url, idpanel, namepanel);

}

}, {

text: getStr('id_delete'),

handler:function(arg1, arg2, arg3, arg4,arg5) {

del(dataliststr, url, idpanel, namepanel,mainIndex);

}

}, {

text: getStr('id_search'),

handler:function() {

Ext.Msg.prompt(searchstr, getStr('id_searchContext'), function(btn, text) {if (btn == 'ok') {

store.filter(searchstr, text);

}

});

}

}

]

});returnpagingToolbar;

};

由上，我们看出pagingToolbar中定义了add，edit，del，search的方法，其中search的方法，就是根据我们的主键进行搜索，这个地方将来也可以改成可以根据不同的字段进行搜索。

而这四个增删改查的实现方法如下：

functionadd(dataliststr, url, idpanel, namepanel) {var columns = newArray();var colarr = dataliststr.split(',');for (var i = 0; i < colarr.length; i++) {

columns.push({

fieldLabel: getStr(colarr[i]),

id:colarr[i],

blankText:'not allow null'});

}var win = newExt.Window({

title: namepanel,

width:500,

height:200,

items: [{

xtype:'form',

id:'form1',

height:350,

borderStyle:'padding-top:3px',

frame:true,

defaultType:'textfield',

labelAlign:'right',

labelWidth:57,

defaluts: {

allowBlank:false, width: 200},

items: columns

}],

buttons: [{

xtype:'button',

text: getStr('id_sure'),

handler:function() {if (!Ext.getCmp('form1').getForm().isValid()) {

Ext.Msg.alert('input is unValid');return false;

}var paramstr = '({';for (var i = 0; i < colarr.length; i++) {if (i == colarr.length - 1) {

paramstr+= colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "'})";

}else{

paramstr+= colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "',";

}

}

paramstr=eval(paramstr);//Ext.Msg.alert('success', idpanel);

Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";

Ext.Ajax.request({

url: url+ "?cmd=add",

params: paramstr,

method:'POST',

success:function(response, opts) {

Ext.getCmp(idpanel).store.reload();

Ext.Msg.alert('info', response.responseText);

},

failure:function(response, opts) {

Ext.Msg.alert('info', response.responseText);

}

});

}

}, {

xtype:'button',

text: getStr('id_cancel'),

handler:function() {for (var i = 0; i < colarr.length; i++) {

Ext.getCmp(colarr[i]).setValue('');

}

}

}]

});

win.show();

};functionedit(dataliststr, url, idpanel,namepanel) {var userRecord =Ext.getCmp(idpanel).getSelectionModel().getSelections();var columns = newArray();var colarr = dataliststr.split(',');var valarray = newArray();if (userRecord.length >= 1) {

}else{

Ext.Msg.alert('info','Not Select a Record!');return false;

}for (var i = 0; i < colarr.length; i++) {

columns.push({

fieldLabel: getStr(colarr[i]),

id: colarr[i],

blankText:'not allow null',

value: userRecord[0].get(colarr[i])

});

}var win = newExt.Window({

title: namepanel,

width:500,

height:200,

items: [{

xtype:'form',

id:'form1',

height:350,

borderStyle:'padding-top:3px',

frame:true,

defaultType:'textfield',

labelAlign:'right',

labelWidth:57,

defaluts: {

allowBlank:false, width: 200},

items: columns

}],

buttons: [{

xtype:'button',

text: getStr('id_sure'),

handler:function() {if (!Ext.getCmp('form1').getForm().isValid()) {

Ext.Msg.alert('input is unValid');return false;

}var paramstr = '({';for (var i = 0; i < colarr.length; i++) {if (i == colarr.length - 1) {

paramstr+= colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "'})";

}else{

paramstr+= colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "',";

}

}

paramstr=eval(paramstr);//Ext.Msg.alert('success', idpanel);

Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";

Ext.Ajax.request({

url: url+ "?cmd=edit",

params: paramstr,

method:'POST',

success:function(response, opts) {

Ext.getCmp(idpanel).store.reload();

Ext.Msg.alert('info', response.responseText);

},

failure:function(response, opts) {

Ext.Msg.alert('info', response.responseText);

}

});

}

}, {

xtype:'button',

text: getStr('id_cancel'),

handler:function() {for (var i = 0; i < colarr.length; i++) {

Ext.getCmp(colarr[i]).setValue('');

}

}

}]

});

win.show();

};functiondel(dataliststr, url, idpanel, namepanel,mainIndex) {var userRecord =Ext.getCmp(idpanel).getSelectionModel().getSelections();var len =userRecord.length;var columns = newArray();var colarr = dataliststr.split(',');if (len == 0) {

Ext.Msg.alert('Info', 'Not Select Record');return false;

}

Ext.Msg.confirm('Info', getStr('id_delconfirm'), function(btn) {var ids = "";if (btn == 'yes') {for (var i = 0; i < len; i++) {if (i == len - 1) {

ids+=userRecord[i].get(mainIndex);

}else{

ids+= userRecord[i].get(mainIndex) + ',';

}

}

Ext.Ajax.request({

url: url+'?cmd=del',

method:'POST',

params: {'uid': ids

},

success:function(response, opts) {

Ext.getCmp(idpanel).store.reload();

Ext.Msg.alert('success', 'delete success');

},

failure:function(response, opts) {

Ext.Msg.alert('failure', 'delete failed');

}

})

}

});

};

相信大家比较容易看懂，我这篇不是入门篇，有关extjs的基础知识，大家还需要查阅相关的文档和手册。

简单说明一下自己进行数据解析的方法，首先因为我们有相应的数据表字段的相关信息，这样，我们的labelField, params等结构都需要动态的创建。创建过程中我也遇到了不少麻烦。问了很多我qq群里的朋友在这里表示感谢。

最后贴几张界面的图

公司电脑加密比较麻烦，就不贴图了，相应大家也能看出端倪。

另讲讲自己工作一年的牢骚。

毕业一年了，感觉技术一点长进也没有。我对我自己的学习能力还是比较有信心的，extjs从接触到今天用了5天，前3天看文档，后两天写了几个界面。这个是今天下午写的。但是这一年来。我学的东西太杂了。

从java 转到了.net ， 学习了asp.net 学习了wcf 。前端后端都要我写。 因为前端太难看，我又学习了extjs。 之前 ，做delphi开发  。因为觉得代码写的混乱，想用c# 重写。于是看了wpf技术。写了几个模块。领导说不用弄了。哎。真他妈坑爹。

另外，我自己是对后端比较感兴趣的，也不想做这份工作。知道现在的主流是移动和云。然后，我又自学了 android 开发 。 又开始看hadoop的相关知识。这些都能做，都可以做。没错。我的确是有很多时间学习。但是我觉得我永远不能在一个方面深入下去了，将来也不知道怎么办？

希望大家谈谈对这件事情的看法，大家做事情这是这么杂么？还是就我是这样的。哎，苦逼！天哪！