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);//发布事件
    }
    
})

转载地址：