Extjs4 类的定义和扩展

一般定义方式，注意方法和函数的添加方式不同。（添加函数只能用override方式添加不知为什么，有知道的，请搞之。）

 

1. 定义一个类，并给他一个方法

   Ext.define('Simple.Class',{
       welcome:function(){
           alert('Welcome to the app');
       }
   });

2. 使用Ext.override方法对已有类进行重载并添加函数

   Ext.override(Simle.Class,{
       goodBye:function(){
           alert('Goodbye');
       },
       funAll:function(){
           this.welcome();
           this.goodBye();
       }
   });

3. 实例化类对象，并调用新的方法

   var app = new Simple.Class();
   app.runAll();   //Welcome to the app     Goodbye

4. 重载的另一种写法

   Simple.Class.override({
      // New members...
   });

 

 

实际例子：

 

Ext.define('MyButton',{
   extend:'Ext.Action',
   initComponent: function(){
   	  var me = this;
   	  var initEnable = true;       //初始权限
   }
});

Ext.override(MyButton,{
   	      mysetenable:function(b){   //增加自定义函数设置按钮权限
   	      	if ( this.initEnable ) {
   	      		if (b){
   	      			this.enable();
   	      		}
   	      		else{
   	      			this.disable();
   	      		}
   	      	}
   	      	else{
   	      		this.disable();
   	      	}
   	      }	
});

例子2：

 

 

Ext.define('PO_Head_Add_Panel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.PO_Head_Add_Panel',
    //height:400,
    //width:600,
     frame: true,
     layout: 'anchor',   //该form分为两列
     bodyPadding: 5,      //偏移5px
     //baseCls: "x-plain",  //指定使用系统背景色
     //defaults: { anchor: "95%", msgTarget: "side" },
     //   anchor: '100%',
     defaults:{//统一设置表单字段默认属性
                //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
                labelSeparator :'：',//分隔符
                labelWidth : 60,//标签宽度
                //width : 150,//字段宽度
                allowBlank : false,//是否允许为空
                //blankText : '不允许为空', //若设置不为空，为空时的提示
                labelAlign : 'right',//标签对齐方式
                msgTarget :'qtip'          //显示一个浮动的提示信息
                //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息
                //msgTarget :'under'       //在字段下方显示一个提示信息
                //msgTarget :'side'        //在字段的右边显示一个提示信息
                //msgTarget :'none'        //不显示提示信息
                //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息
     },
    items:[{
            	xtype:'combobox',
                name: 'ToAddress',
                labelWidth:70,
                width:600,
                queryMode: 'local',
                store:TmpAddressStore,
                displayField: 'AddrName',
                valueField: 'AddrName',                
				editable : false,// 是否允许输入
				forceSelection : true,// 必须选择一个选项
                msgTarget: 'side',
                allowBlank: false,	//是否允许空值
                fieldLabel: '送货地址'
    },{
            	xtype:'textfield',
                name: 'HRemark',
                labelWidth:70,
                width:600,
                msgTarget: 'side',
                allowBlank: false,	//是否允许空值
                fieldLabel: '备注'
    }],
     initComponent: function(){ 
     	var me = this;
     	var PoType = '';       //可以定义属性   obj.PoType 使用
     	var TmpHeadRec = Ext.create('PO_HeadData');  
  	
        Ext.apply(this, {
         		buttons: [{
    	    		    text: '保存',
	       	    		handler:function(){
			              if (me.getForm().isValid()) {   //判断提交的数据是否符合正则表达式
						//保存功能
			              }
    	      			}
        		}, {
	        	    	text: '取消',
    	        		handler: function () { 
    	        		   me.ownerCt.hide(); 
    	        		}            
     			}],
     			SetFormValue:function(){       //自定义方法  obj.SetFormValue() 方式调用
     				        me.TmpHeadRec = HeadStore.getAt(0);
					me.getForm().findField('POType').setValue(me.TmpHeadRec.get('POType'));
					me.getForm().findField('PONum').setValue(me.TmpHeadRec.get('PONum'));
     			}
       });
    	
       this.callParent(arguments);
     }    
});