学步园

 1/**//*
  2 * @author: Lilf
  3 * Description: ExtJS中的面向对象设计,组件化变成思想
  4 */
  5/**//***************************扩展VTypes类，增加年龄的验证****************************/
  6Ext.apply(Ext.form.VTypes, {
  7    "age": function(_v){
  8        if (/^\d+$/.test(_v)) {
  9            var intExp = parseInt(_v);
 10            if (intExp < 200) 
 11                return true;
 12        }
 13        return false;
 14    },
 15    ageText: "请输入正确的年龄格式，如：23"
 16});
 17/**//***************************继承自FormPanel的表单组件,用来构件Window***************************/
 18PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
 19    constructor: function(){
 20        PersonInfoFormPanel.superclass.constructor.apply(this, [{
 21            baseCls: "x-plain",
 22            buttonAlign: "right",
 23            labelWidth: 30,
 24            defaultType: "textfield",
 25            defaults: {
 26                anchor: "95%",
 27                labelStyle: "text-align:right"
 28            },
 29            items: [{
 30                fieldLabel: "姓名",
 31                name: "name"
 32            }, {
 33                fieldLabel: "年龄",
 34                name: "age",
 35                vtype: "age"//验证年龄（通过vtype类型来验证）
 36            }, {
 37                xtype: "combo",
 38                mode: "local",//本地数据
 39                readOnly: true,
 40                fieldLabel: "性别",
 41                displayField: "sex",//显示下拉框的内容
 42                triggerAction: "all",//在选择时，显示所有的项
 43                value: "男",//默认值
 44                store: new Ext.data.SimpleStore({
 45                    fields: ["sex"],
 46                    data: [["男"], ["女"]]
 47                }),
 48                name: "sex"//绑定字段
 49            }]
 50        
 51        
 52        }])
 53    },
 54    //---以下为PersonInfoFormPanel类对外提供的方法---
 55    getValues: function(){
 56        if (this.getForm().isValid()) 
 57            return new Ext.data.Record(this.getForm().getValues());
 58        else 
 59            throw new Error("验证没有通过");//自定义异常
 60    },
 61    setValues: function(_r){
 62        this.getForm().loadRecord(_r);
 63    },
 64    reset: function(){
 65        this.getForm().reset();
 66    }
 67    
 68    
 69});
 70/**//*************继承自Window的基类,insertWindow与updateWindow都由此继承****************/
 71baseWindow = Ext.extend(Ext.Window, {
 72    form: null,
 73    constructor: function(){
 74        this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类
 75        baseWindow.superclass.constructor.apply(this, [{
 76            plain: true,
 77            width: 350,
 78            //title: "新增人员",
 79            modal: true,
 80            resizable: false,
 81            closeAction: "hide",
 82            defaults: {
 83                style: "padding:5px"
 84            },
 85            items: this.form,
 86            buttons: [{
 87                text: "确 定",
 88                handler: this.onSubmitClick,//提交事件调用
 89                scope: this
 90            }, {
 91                text: "取 消",
 92                handler: this.onCancelClick,//取消事件调用
 93                scope: this
 94            
 95            }]
 96        }]);
 97        //给insertWindow对象添加事件（事件冒泡）
 98        this.addEvents("submit");
 99    },
100    //提交事件处理函数
101    onSubmitClick: function(){
102        try {
103            //发布事件
104            this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues
105            this.close();
106            
107        } 
108        catch (_err) {
109            Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常
110        }
111    },
112    //取消事件处理函数
113    onCancelClick: function(){
114        this.close();
115    },
116    //重置与隐藏事件处理函数
117    close: function(){
118        this.form.reset();
119        this.hide();
120    }
121    
122});
123/**//******************insertWindow类****************************/
124insertWindow = Ext.extend(baseWindow, {
125    title: "新增人员"
126});
127/**//****************updateWindow类******************************/
128updateWindow = Ext.extend(baseWindow, {
129    title: "修改人员",
130    load: function(_r){
131        this.form.setValues(_r);
132    }
133});
134/**//*******根据上面组件创建新的GridPanel类,它就像我们根据不同的零件设计出来的汽车************
135 * ExtJs自定义PersonListGridPanel类
136 * 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承],
137 * 并override了该类的构造函�hu数
138 * 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承]
139 * 该类实现了如何对外部公布一个事�件
140 * 在构造函数中添加一个事件[this.addEvents("事件名称"）]
141 * 然后使用this.fireEvent("事件名称",参数）来发布此事�件
142 * 最后在客户端调用的时候来订阅该事�jian件
143 */
144PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
145    _window: null,
146    _updateWin: null,
147    constructor: function(_url){
148        this._window = new insertWindow();//insertWindow对象引用
149        this._updateWin = new updateWindow();//updateWindow对象引用
150        PersonListGridPanel.superclass.constructor.apply(this, [{
151            renderTo: Ext.getBody(),
152            width: 550,
153            height: 200,
154            frame: true,
155            layout: "form",
156            //工具栏
157            tbar: [{
158                text: "add",
159                handler: function(){
160                    this._window.show();
161                },
162                scope: this
163            }, "-", {
164