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

本文介绍了一个基于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);//发布事件
    }
    
})


转载地址:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值