ExtJS中的面向对象设计,组件化编程思想（三）

/**//* * @author: Lilf * Description: ExtJS中的面向对象设计,组件化变成思想 *//**//***************************扩展VTypes类，增加年龄的验证****************************/Ext.apply(Ext.form.VTypes, {    "age": function(_v){        if (/^\d+$/.test(_v)) {            var intExp = parseInt(_v);            if (intExp < 200)                 return true;        }        return false;    },    ageText: "请输入正确的年龄格式，如：23"});/**//***************************继承自FormPanel的表单组件,用来构件Window***************************/PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {    constructor: function(){        PersonInfoFormPanel.superclass.constructor.apply(this, [{            baseCls: "x-plain",            buttonAlign: "right",            labelWidth: 30,            defaultType: "textfield",            defaults: {                anchor: "95%",                labelStyle: "text-align:right"            },            items: [{                fieldLabel: "姓名",                name: "name"            }, {                fieldLabel: "年龄",                name: "age",                vtype: "age"//验证年龄（通过vtype类型来验证）            }, {                xtype: "combo",                mode: "local",//本地数据                readOnly: true,                fieldLabel: "性别",                displayField: "sex",//显示下拉框的内容                triggerAction: "all",//在选择时，显示所有的项                value: "男",//默认值                store: new Ext.data.SimpleStore({                    fields: ["sex"],                    data: [["男"], ["女"]]                }),                name: "sex"//绑定字段            }]                        }])    },    //---以下为PersonInfoFormPanel类对外提供的方法---    getValues: function(){        if (this.getForm().isValid())             return new Ext.data.Record(this.getForm().getValues());        else             throw new Error("验证没有通过");//自定义异常    },    setValues: function(_r){        this.getForm().loadRecord(_r);    },    reset: function(){        this.getForm().reset();    }        });/**//*************继承自Window的基类,insertWindow与updateWindow都由此继承****************/baseWindow = Ext.extend(Ext.Window, {    form: null,    constructor: function(){        this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类        baseWindow.superclass.constructor.apply(this, [{            plain: true,            width: 350,            //title: "新增人员",            modal: true,            resizable: false,            closeAction: "hide",            defaults: {                style: "padding:5px"            },            items: this.form,            buttons: [{                text: "确 定",                handler: this.onSubmitClick,//提交事件调用                scope: this            }, {                text: "取 消",                handler: this.onCancelClick,//取消事件调用                scope: this                        }]        }]);        //给insertWindow对象添加事件（事件冒泡）        this.addEvents("submit");    },    //提交事件处理函数    onSubmitClick: function(){        try {            //发布事件            this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues            this.close();                    }         catch (_err) {            Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常        }    },    //取消事件处理函数    onCancelClick: function(){        this.close();    },    //重置与隐藏事件处理函数    close: function(){        this.form.reset();        this.hide();    }    });/**//******************insertWindow类****************************/insertWindow = Ext.extend(baseWindow, {    title: "新增人员"});/**//****************updateWindow类******************************/updateWindow = Ext.extend(baseWindow, {    title: "修改人员",    load: function(_r){        this.form.setValues(_r);    }});/**//*******根据上面组件创建新的GridPanel类,它就像我们根据不同的零件设计出来的汽车************ * ExtJs自定义PersonListGridPanel类 * 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承], * 并override了该类的构造函�hu数 * 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承] * 该类实现了如何对外部公布一个事�件 * 在构造函数中添加一个事件[this.addEvents("事件名称"）] * 然后使用this.fireEvent("事件名称",参数）来发布此事�件 * 最后在客户端调用的时候来订阅该事�jian件 */PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {    _window: null,    _updateWin: null,    constructor: function(_url){        this._window = new insertWindow();//insertWindow对象引用        this._updateWin = new updateWindow();//updateWindow对象引用        PersonListGridPanel.superclass.constructor.apply(this, [{            renderTo: Ext.getBody(),            width: 550,            height: 200,            frame: true,            layout: "form",            //工具栏            tbar: [{                text: "add",                handler: function(){                    this._window.show();                },                scope: this            }, "-", {                text: "update",                handler: function(){                    this._updateWin.show();                    try {                        this._updateWin.load(this.getSelected());                    }                                                             catch (_err) {                        Ext.Msg.alert("系统提示", _err.description);                        this._updateWin.close();                    }                },                scope: this            }, "-", {                text: "delete",                handler: this.onRemovePerson,                scope: this            }],            enableColumnMove: false,            //列模板            columns: [{                header: "Name",                menuDisabled: true,                dataIndex: "name"            }, {                header: "Age",                menuDisabled: true,                dataIndex: "age"            }, {                header: "Sex",                menuDisabled: true,                dataIndex: "sex"            }],            //数据源            store: new Ext.data.JsonStore({                autoLoad: true,                url: _url,                fields: ["name", "age", "sex"]            }),            //选中模板            selModel: new Ext.grid.RowSelectionModel({                singleSelect: true,                listeners: {                    "rowselect": {                        fn: this.onRowSelected,                        scope: this                    }                }            })                }]);        //添加事件        this.addEvents("rowselect");        //事件订阅        this._window.on("submit", this.onInsertWinSubmit, this);        this._updateWin.on("submit", this.onUpdateWinSubmit, this);    },    //----- 以下为自定义方法---------    //获得选中的记录    getSelected: function(){        var _sm = this.getSelectionModel();        if (_sm.getCount() == 0)             throw new Error("你没有选中任何记录,请选择一条记录后重试");        return _sm.getSelected();    },    //插入一条记录    insert: function(_r){        this.getStore().add(_r);    },    //更新选中的记录    update: function(_r){        try {            var _rs = this.getSelected();            var _data = _rs.data;            for (var _i in _data) {                _rs.set(_i, _r.get(_i));            };            _rs.commit();        }         catch (_err) {                }            },    //删除选中的记录    remove: function(){        try {            var _rs = this.getSelected();            Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){                if (_btn == "yes")                     this.getStore().remove(_rs);            }, this);        }         catch (_err) {            Ext.Msg.alert("系统提示", _err.description);        }    },    //-------以下为自定义事件处理函数------------    //添加事件    onInsertWinSubmit: function(_win, _r){        this.insert(_r);    },    //修改事件    onUpdateWinSubmit: function(_win, _r){        this.update(_r);    },    //删除事件    onRemovePerson: function(){        this.remove();    },    //选中事件    onRowSelected: function(_sel, _index, _r){        this.fireEvent("rowselect", _r);//发布事件    }    })

转载地址：