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

       }

      

   })

 

 

 

转自于：http://www.cnblogs.com/xnxylf/archive/2009/04/02/1428403.html