成功搞定一個通用的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的相關知識。這些都能做，都可以做。沒錯。我的確是有很多時間學習。但是我覺得我永遠不能在一個方面深入下去了，將來也不知道怎么辦？

 

希望大家談談對這件事情的看法，大家做事情這是這么雜么？還是就我是這樣的。哎，苦逼！天哪！