封装的ExtGrid 实现增、删、改、查等功能

只要new一个新对象后新增修改等表单将根据定义的信息 自动生成提高开发效率

调用例子：

Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var gridStructure = [// grid的数据结构   {     header : '事件编号',     name : 'SJID',     hidden : "true",     type:'label'   }, {     header : '研究项目号',     name : 'YJXMBH',     width : 200,     type:'combo',     //绑定数据库     fobj:'YL_YJXM',     text:'XMMC',     value:'YJXMBH'     //绑定数组     //fobj:[[1,'是'],[2,'否']]   }, {     header : '时间点',     name : 'SJD',     align : 'center',     width : 100,     type:'number'     //rendererunction(v){return v=='4.0'?'是':'否'}   }, {     header : '时间点描述',     name : 'SJDMS',     align : 'center',     width : 100   }, {     header : '事件',     name : 'SJ',     align : 'center',     width : 100   }, {     header : '检查项目编号',     name : 'JCXMBH',     align : 'center',     width : 100   }]; var myUxGrid = new Ext.ux.grid.MyGrid({// 创建封装的MyGrid对象   id : 'dept-center-stat-grid',   url : 'http://localhost080/YLXT/servlet/DealDataJsonServlet.do',   selectType : 'check',   // dataObject : myGridData, // defaultSortField : 'stat_sn',   // keyField : 'basicUnitNo',   structure : gridStructure,   autoScroll : true,   autoWidth : true,   frame : true,   bodyStyle : '100%',   layout : 'fit',   height : 600,   findField:'YJXMBH', //指定搜索字段   keyField:'SJID', //指定主键字段   loadMask : {   msg : label.wait   },   title : '研究步骤维护',   renderTo : Ext.getBody(),   tablename : 'YL_YJBZ' }); });

以下封装的源代码：

view plaincopy to clipboardprint?
/* 
 * 封装的综合的Grid控件，继承新增、修改、删除、检索、分页功能。 
 * blog：www.chendw.cn  
 * code by cdw 
 */ 
Ext.namespace("Ext.ux.grid");  
Ext.ux.grid.MyGrid = Ext.extend(Ext.grid.GridPanel, {  
    // 储存表格结构  
    structure : '',  
    // 表格绑定的表  
    tablename : '',  
    // 指定加载的列 默认为读取表上所有列数据  
    fields : '',  
    // 每页显示条数  
    pageSize : '15',  
    // 表单里控件的默认宽  
    fieldwidth : 200,  
    // reader类型如果当为json的时候那么url不能空，当为array的时候dataObject不能为空  
    readType : 'json',  
    // 获取数据的URL  
    url : '',  
    // 数据对象  
    dataObject : null,  
    // 表格主键  
    keyField : '',  
    // 绑定查询的列  
    findField : null,  
    // 是否需要分组，默认为false，如果设置为true须再设置两个参数一个为myGroupField和myGroupTextTpl  
    needGroup : false,  
    // 分组的字段名称  
    myGroupField : '',  
    // 分组显示的模板，eg：{text} ({[values.rs.length]} {[values.rs.length > 1 ?  
    // "Items" : "Item"]})  
    myGroupTextTpl : '',  
    // 列模式的选择模式,默认为rowselectModel，如果相设置成check模式，就设置为check  
    selectType : '',  
    // 默认排序字段  
    defaultSortField : 'ID',  
    // 是否需要分页工具栏，默认为true  
    needPage : true,  
    frame : false,  
    // 是否带展开按钮，默认为false  
    collapsible : false,  
    animCollapse : true,  
    loadMask : true,  
    viewConfig : {  
        forceFit : true 
    },  
    // 存储表头信息  
    col : null,  
    // private  
    initComponent : function() {  
        if (this.structure != '') {  
            this.initStructure();  
        }  
        Ext.ux.grid.MyGrid.superclass.initComponent.call(this);  
    },  
    // private  
    initEvents : function() {  
        Ext.ux.grid.MyGrid.superclass.initEvents.call(this);  
        /* 
         * this.getStore().load( { params : { start : 0, limit : 30 } }); 
         *  
         */ 
        if (this.loadMask) {  
            // Ext.MessageBox.wait('sssssss')  
    this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {  
        store : this.store  
    }, this.loadMask));  
}  
},  
// private  
    initStructure : function() {  
        var oDs = null;  
        var oCM = new Array(); // 列模式数组  
    var oRecord = new Array(); // 容器对数组  
    // 构成grid的两个必须组件: column和record，根据structure将这两个组件创建出来  
    // 判断表格的选择模式  
    if (this.selectType == 'check') {  
        var sm = new Ext.grid.CheckboxSelectionModel();  
        oCM[oCM.length] = sm;// 在列模式数组中添加checkbox模式按钮  
        this.selModel = sm;// 并将selModel设置为check模式  
    }  
    var len = this.structure.length;// 得到结构的长度  
    for ( var i = 0; i < len; i++) {  
        var c = this.structure[i];  
        // alert( c.hidden ? c. this.fieldwidth)  
        // 如果字段为hidden，则不生成filters和columnMode  
        // 默认格式化日期列  
        if (c.type == 'date' && !c.renderer) {  
            c.renderer = this.formatDate;  
        }  
        oCM[oCM.length] = {  
            header : c.header,  
            dataIndex : c.name,  
            hidden : c.hidden || false,  
            width : !c.hidden ? c.width : this.fieldwidth,  
            // 类型为数字则右对齐  
            align : c.type == 'numeric' ? 'right' : 'left',  
            // 结构的渲染函数  
            renderer : c.renderer  
        };  
        oRecord[oRecord.length] = {  
            name : c.name,  
            // 如果类型不是date型则全部为string型  
            type : c.type == 'date' ? 'date' : 'string',  
            dateFormat : 'Y-m-d' 
        };  
    }  
    this.col = oCM;  
    // 生成columnModel  
    this.cm = new Ext.grid.ColumnModel(oCM);  
    // this.colModel = this.cm;  
    // 默认可排序  
    this.cm.defaultSortable = true;  
    // 生成表格数据容器  
    var record = Ext.data.Record.create(oRecord);  
    // 判断读取类别，目前只实现了，jsonreader和arrayReader  
    var reader;  
    var tablename = this.tablename;  
    var pageSize = this.pageSize;  
    var fields = this.fields;  
    switch (this.readType) {  
    case 'json':  
        reader = new Ext.data.JsonReader( {  
            totalProperty : "Count",  
            root : "List",  
            id : this.keyField  
        // 关键字段  
                }, record);  
        this.ds = new Ext.data.GroupingStore( {  
            proxy : new Ext.data.HttpProxy( {  
                url : this.url  
            }),  
            reader : reader,  
            sortInfo : {  
                field : this.defaultSortField,  
                direction : 'ASC' 
            },  
            remoteSort : true,  
            groupField : this.myGroupField,  
            listeners : {  
                'reload' : function() {  
                    alert('reload')  
                }  
            }  
        });  
        break;  
    case 'array':  
        reader = new Ext.data.ArrayReader( {}, record);  
        this.ds = new Ext.data.GroupingStore( {  
            reader : reader,  
            data : this.dataObject,  
            sortInfo : {  
                field : this.defaultSortField,  
                direction : 'ASC' 
            },  
            groupField : this.myGroupField  
        });  
        break;  
    default:  
        break;  
    }  
    // 判断是否需要分组  
    if (this.needGroup) {  
        this.view = new Ext.grid.GroupingView( {  
            forceFit : true,  
            groupTextTpl : this.myGroupTextTpl  
        })  
    }  
    this.store = this.ds;  
    // 生成分页工具栏  
    if (this.needPage) {  
        var pagingToolbar = new Ext.PagingToolbar( {  
            displayInfo : true,  
            displayMsg : '当前记录数:{0} - {1} 总记录数: {2}',  
            emptyMsg : '没有符合条件的记录',  
            store : this.store  
        });  
        pagingToolbar.pageSize = this.pageSize;  
        this.bbar = pagingToolbar;  
        this.bottomToolbar = this.bbar;  
        var oSearch = new Ext.form.TextField( {  
            id : 'search',  
            xtype : 'textfield',  
            align : 'right' 
        })  
        var ogrid = this;  
        var keyField = this.keyField;  
        // 生成顶部工具条  
        var topToolbar = new Ext.Toolbar( {  
            items : [ {  
                iconCls : 'add',  
                text : "新增",  
                handler : function() {  
                    ogrid.doEdit();  
                }  
            }, {  
                iconCls : 'edit',  
                text : "修改",  
                handler : function() {  
                    var record = ogrid.getSelectionModel().getSelected();  
                    if (record == null) {  
                        Ext.Msg.alert('提示', '请先选择你要编辑的数据');  
                        return;  
                    }  
                    var id = record.get(keyField);  
                    ogrid.doEdit(id);  
                }  
            }, {  
                iconCls : 'remove',  
                text : "删除",  
                handler : function() {  
                    ogrid.doDelete();  
                }  
            }, {  
                iconCls : 'x-btn-text x-tbar-loading',  
                text : "刷新",  
                handler : function() {  
                    ogrid.getStore().reload();  
                },  
                scope : this 
            }, '->', '项目名称：', oSearch, {  
                iconCls : 'search',  
                text : "搜索",  
                handler : function() {  
                    ogrid.getStore().reload();  
                }  
            }  
            ]  
        })  
    }  
    this.tbar = topToolbar;  
    this.topToolbar = this.tbar;  
    // 将filter加入grid  
    // this.plugins = filters;  
    var findField = this.findField;  
    this.store.on('beforeload', function() {  
        var scondition = "";  
        if (oSearch.getValue()) {  
            scondition = findField + " like '%" + oSearch.getValue() + "%'";  
        }  
        var para = {  
            action : 'show',  
            pageSize : pageSize,  
            name : tablename,  
            // fields : fields,  
            condition : scondition,  
            tmpId : '',  
            tmpName : '' 
        };  
        Ext.apply(this.baseParams, para);  
    });  
    this.store.load( {  
        params : {  
            start : 0,  
            limit : 10  
        }  
    });  
}  
,  
/* 
 * @功能：编辑用户选中的数据 @参数：id 为空则为新增数据 不为空则为修改数据 
 *  
 */ 
doEdit : function(id) {  
    var tablename = this.tablename;  
    var keyField = this.keyField;  
    var url = this.url;  
    var ogrid = this;  
    var oField = new Array();  
    var len = this.structure.length;  
    var action = "";  
    // 判断id是否为空 是：新增 否：修改  
    action = id ? 'edit' : 'new';  
    // ========== 初始化字段信息 开始==============  
    for ( var i = 0; i < len; i++) {  
        var c = this.structure[i];  
        var type;  
        var ds;  
        c.type = c.type || 'string'; // 默认类型为string  
        switch (c.type) {  
        case 'string':  
            oField[oField.length] = {  
                xtype : 'textfield',  
                id : tablename + '_' + c.name,  
                fieldLabel : c.header,  
                anchor : '90%',  
                allowBlank : c.required ? false : true 
            }  
            break;  
        case 'number':  
            oField[oField.length] = {  
                xtype : 'numberfield',  
                id : tablename + '_' + c.name,  
                fieldLabel : c.header,  
                anchor : '90%',  
                allowBlank : c.required ? false : true 
            }  
            break;  
        case 'date':  
            oField[oField.length] = {  
                xtype : 'datefield',  
                id : tablename + '_' + c.name,  
                fieldLabel : c.header,  
                format : 'Y-m-d',  
                anchor : '90%',  
                allowBlank : c.required ? false : true 
            }  
            break;  
        case 'combo':  
            // 初始化下拉列表数据  
            c.value = c.value || 'value';  
            c.text = c.text || 'text';  
            ds = this.initCombo(c);  
            oField[oField.length] = {  
                xtype : 'combo',  
                hiddenName : tablename + '_' + c.name,  
                fieldLabel : c.header,  
                anchor : '90%',  
                store : ds,  
                displayField : c.text,  
                valueField : c.value,  
                typeAhead : true,  
                triggerAction : 'all',  
                selectOnFocus : true,  
                mode : 'local',  
                allowBlank : c.required ? false : true,  
                listeners : {  
                    'blur' : function() {  
                        (this.setValue(this.getValue()))  
                    }  
                }  
            }  
            break;  
        case 'label':  
            oField[oField.length] = {  
                xtype : 'textfield',  
                disabled : true,  
                id : tablename + '_' + c.name,  
                fieldLabel : c.header,  
                anchor : '90%',  
                value : '系统将自动生成' 
            }  
        }  
    }  
    // ------------- 初始化字段信息 结束------------  
    // 初始化表单结构  
    var editForm = new Ext.form.FormPanel( {  
        labelWidth : 80,  
        frame : true,  
        border : false,  
        hideBorders : true,  
        autoHeight : true,  
        items : oField,  
        buttons : [ {  
            text : '保存',  
            handler : function() {  
                doSubmitFrom()  
            }  
        }, {  
            text : '关闭',  
            handler : function() {  
                addWin.hide();  
                addWin.destroy();  
            }  
        } ]  
    })  
    var addWin = new Ext.Window( {  
        title : '研究项目维护',  
        labelWidth : 100,  
        frame : true,  
        autoHeight : true,  
        height : 400,  
        width : 650,  
        items : editForm  
    })  
    addWin.show()  
    // 从服务器初始化表单数据  
    if (id != null && id != '') {  
        Ext.MessageBox.wait('正在数据加载,请稍后......', '请稍后')  
        editForm.form.load( {  
            url : url,  
            params : {  
                action : 'load',  
                name : tablename,  
                fieldkey : keyField,  
                condition : keyField + "='" + id + "'",  
                id : id  
            },  
            method : 'post',  
            success : function(action, form) {  
                Ext.MessageBox.hide();  
            },  
            failure : ogrid.doFailure  
        });  
    }  
    // 保存表单数据  
    function doSubmitFrom() {  
        if (editForm.form.isValid()) {  
            editForm.form.url = url + '?action=' + action + '&name=' 
                    + tablename + '&fieldkey=' + keyField + '&id=' + id;  
            editForm.form.submit( {  
                waitTitle : "请稍候",  
                waitMsg : "正在提交表单数据，请稍候。。。。。。",  
                success : function() {  
                    ogrid.getStore().reload();  
                    Ext.Msg.alert('提示', '操作成功');  
                },  
                failure : ogrid.doFailure  
            });  
        }  
    }  
},  
/* 
 * @功能：删除所有选中记录支持批量删除 
 *  
 */ 
doDelete : function() {  
    var sSelId = "";  
    var ogrid = this;  
    var tablename = this.tablename;  
    var keyField = this.keyField;  
    var url = this.url;  
    var aId = new Array();  
    // 从GRID对象中获得Value  
    var record = this.getSelectionModel().getSelected();  
    if (!record) {  
        Ext.Msg.alert("提示", "请先选择要删除的数据!");  
        return;  
    } else {  
        for ( var i = 0, j = this.store.getCount(); i < j; i++) {  
            if (this.getSelectionModel().isSelected(i)) {  
                sSelId += "'" + this.store.getAt(i).get(keyField) + "',";  
                aId[aId.length] = this.store.getAt(i)  
            }  
        }  
        if (sSelId.length > 0) {  
            sSelId = sSelId.substr(0, sSelId.length - 1);  
        }  
    }  
    Ext.MessageBox.confirm('确认删除', '你真的要删除所选数据吗?', function(btn) {  
        if (btn == 'yes') {// 选中了是按钮  
                Ext.MessageBox.wait("正在删除数据，请稍候。。。。。。", "请稍后");  
                Ext.Ajax.request( {  
                    url : url,  
                    success : function() {  
                        Ext.Msg.alert('提示', '操作成功');  
                        for ( var i = 0; i < aId.length; i++) {  
                            ogrid.store.remove(aId[i]);  
                        }  
                    },  
                    failure : ogrid.doFailure,  
                    params : {  
                        action : 'delete',  
                        name : tablename,  
                        fieldkey : keyField,  
                        id : sSelId  
                    }  
                });  
            }  
        });  
},  
/* 
 * @功能：初始化combo控件数据 
 *  
 */ 
initCombo : function(o) {  
    var url = this.url;  
    var fields = o.value + ',' + o.text;  
    var ds = null;  
    if (typeof o.fobj != 'object') {  
        var reader = new Ext.data.JsonReader( {  
            totalProperty : 'Count',  
            root : 'List' 
        }, [ {  
            name : o.value  
        }, {  
            name : o.text  
        } ]);  
        ds = new Ext.data.Store( {  
            proxy : new Ext.data.HttpProxy( {  
                url : url  
            }),  
            reader : reader  
        });  
        ds.on('beforeload', function() {  
            // Ext.MessageBox.wait('正在加载数据请稍后。。。。。。','请稍后')  
                var para = {  
                    action : 'show',  
                    pagesize : '999',  
                    name : o.fobj,  
                    fields : fields  
                };  
                Ext.apply(ds.baseParams, para);  
            });  
    } else {  
        ds = new Ext.data.Store( {  
            proxy : new Ext.data.MemoryProxy(o.fobj),  
            reader : new Ext.data.ArrayReader( {}, [ {  
                name : 'value' 
            }, {  
                name : 'text' 
            } ]),  
            autoLoad : true 
        });  
    }  
    ds.load( {  
        params : {  
            start : 0,  
            limit : 10  
        }  
    });  
    return ds;  
},  
/* 
 * @功能：请求成功显示信息 
 */ 
doSuccess : function(action, form) {  
    var ogrid = this;  
    Ext.Msg.alert('提示', '操作成功');  
    ogrid.getStore().reload();  
},  
/* 
 * @功能：请求失败显示信息 
 */ 
doFailure : function(action, form) {  
    Ext.Msg.alert('请求错误', '服务器未响应，请稍后再试');  
},  
/* 
 * @功能:默认的格式化日期函数 @返回格式：2008-09-21 
 */ 
formatDate : function(v) {  
    return v ? v.dateFormat('Y-m-d') : '' 
}  
});