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

入口函数如下：

function getADES(dataliststr, url, searchstr, idpanel, namepanel,mainIndex) {    var tstore = getStore(url, dataliststr);    tstore.load({ params: { start: 0, limit: 10} });    var grid = new Ext.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 = new Ext.Panel({        title:namepanel,        items:grid,        layout:'fit',        region: 'center',        collapsible: true,        loadMask:{msg:'wait......'}    });    return userPanel;};

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

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

function getStore(url, dataliststr) {    var columns = new Array();    var colarr = dataliststr.split(',');    for (var i = 0; i < colarr.length; i++) {        columns.push({            name: colarr[i],            type: 'string'        });    }    var tmpRecord = new Ext.data.Record.create(columns);    var store = new Ext.data.Store({        proxy: new Ext.data.HttpProxy({            url:url+"?cmd=list",            method:'GET'        }),        remoteSort:true,        reader: new Ext.data.JsonReader({            root:"results"//,            //totalProperty:'totalCount'          },tmpRecord)    });           return store;}

后台代码如下：

public partial class View_usermanage_proCate : System.Web.UI.Page{    private static ProCateManager pcManager = new ProCateManager();    public string JsonTest = "";    protected void Page_Load(object sender, 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 in re)            {                pcManager.DelProcate(t);            }            Response.Write("{success:true}");            Response.End();        }                      }}
        
       
      
     

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

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

function getCM(dataliststr) {       var columns = new Array();    //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 = new Ext.grid.ColumnModel(        columns);    return columnMode;};

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

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

代码如下

function getPTB(dataliststr, searchstr, url, idpanel, namepanel,mainIndex) {    var pagingToolbar = new Ext.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);                    }                });            }        }        ]    });    return pagingToolbar;};

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

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

function add(dataliststr, url, idpanel, namepanel) {    var columns = new Array();        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 = new Ext.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();};function edit(dataliststr, url, idpanel,namepanel) {    var userRecord = Ext.getCmp(idpanel).getSelectionModel().getSelections();    var columns = new Array();    var colarr = dataliststr.split(',');    var valarray = new Array();    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 = new Ext.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();};function del(dataliststr, url, idpanel, namepanel,mainIndex) {    var userRecord = Ext.getCmp(idpanel).getSelectionModel().getSelections();    var len = userRecord.length;     var columns = new Array();    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的相关知识。这些都能做，都可以做。没错。我的确是有很多时间学习。但是我觉得我永远不能在一个方面深入下去了，将来也不知道怎么办？

 

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