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

 

  1 /**/ /*
  2 * @author: Lilf
  3 * Description: ExtJS中的面向对象设计,组件化变成思想
  4 */
  5 /**/ /***************************扩展VTypes类，增加年龄的验证****************************/
  6 Ext.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***************************/
 18 PersonInfoFormPanel  =  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都由此继承****************/
 71 baseWindow  =  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类****************************/
124 insertWindow  =  Ext.extend(baseWindow,  {
125    title: "新增人员"
126} );
127 /**/ /****************updateWindow类******************************/
128 updateWindow  =  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 */
144 PersonListGridPanel  =  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                text: "update",
165                handler: function(){
166                    this._updateWin.show();
167                    try {
168                        this._updateWin.load(this.getSelected());
169                    } 
170                    
171                    
172                    catch (_err) {
173                        Ext.Msg.alert("系统提示", _err.description);
174                        this._updateWin.close();
175                    }
176                },
177                scope: this
178            }, "-", {
179                text: "delete",
180                handler: this.onRemovePerson,
181                scope: this
182            }],
183            enableColumnMove: false,
184            //列模板
185            columns: [{
186                header: "Name",
187                menuDisabled: true,
188                dataIndex: "name"
189            }, {
190                header: "Age",
191                menuDisabled: true,
192                dataIndex: "age"
193            }, {
194                header: "Sex",
195                menuDisabled: true,
196                dataIndex: "sex"
197            }],
198            //数据源
199            store: new Ext.data.JsonStore({
200                autoLoad: true,
201                url: _url,
202                fields: ["name", "age", "sex"]
203            }),
204            //选中模板
205            selModel: new Ext.grid.RowSelectionModel({
206                singleSelect: true,
207                listeners: {
208                    "rowselect": {
209                        fn: this.onRowSelected,
210                        scope: this
211                    }
212                }
213            })
214        
215        }]);
216        //添加事件
217        this.addEvents("rowselect");
218        //事件订阅
219        this._window.on("submit", this.onInsertWinSubmit, this);
220        this._updateWin.on("submit", this.onUpdateWinSubmit, this);
221    },
222    //----- 以下为自定义方法---------
223    //获得选中的记录
224    getSelected: function(){
225        var _sm = this.getSelectionModel();
226        if (_sm.getCount() == 0) 
227            throw new Error("你没有选中任何记录,请选择一条记录后重试");
228        return _sm.getSelected();
229    },
230    //插入一条记录
231    insert: function(_r){
232        this.getStore().add(_r);
233    },
234    //更新选中的记录
235    update: function(_r){
236        try {
237            var _rs = this.getSelected();
238            var _data = _rs.data;
239            for (var _i in _data) {
240                _rs.set(_i, _r.get(_i));
241            };
242            _rs.commit();
243        } 
244        catch (_err) {
245        
246        }
247        
248    },
249    //删除选中的记录
250    remove: function(){
251        try {
252            var _rs = this.getSelected();
253            Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){
254                if (_btn == "yes") 
255                    this.getStore().remove(_rs);
256            }, this);
257        } 
258        catch (_err) {
259            Ext.Msg.alert("系统提示", _err.description);
260        }
261    },
262    //-------以下为自定义事件处理函数------------
263    //添加事件
264    onInsertWinSubmit: function(_win, _r){
265        this.insert(_r);
266    },
267    //修改事件
268    onUpdateWinSubmit: function(_win, _r){
269        this.update(_r);
270    },
271    //删除事件
272    onRemovePerson: function(){
273        this.remove();
274    },
275    //选中事件
276    onRowSelected: function(_sel, _index, _r){
277        this.fireEvent("rowselect", _r);//发布事件
278    }
279    
280} )
281
282
283
284
285