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

最近研究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<string> columns = new List<string>();

        columns.Add("CateID");
        columns.Add("ProCate");
        string results = pcManager.getAllProCate(columns, 0, 10);
        JsonTest = results;
        */
        
        if (cmd.Equals("list"))
        {
            List<string> columns = new List<string>();

            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的相关知识。这些都能做，都可以做。没错。我的确是有很多时间学习。但是我觉得我永远不能在一个方面深入下去了，将来也不知道怎么办？

 

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