Extjs4 类的定义和扩展

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

 

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

       1: Ext.define('Simple.Class',{
       2:     welcome:function(){
       3:         alert('Welcome to the app');
       4:     }
       5: });
  2. 使用Ext.override方法对已有类进行重载并添加函数

       1: Ext.override(Simle.Class,{
       2:     goodBye:function(){
       3:         alert('Goodbye');
       4:     },
       5:     funAll:function(){
       6:         this.welcome();
       7:         this.goodBye();
       8:     }
       9: });
  3. 实例化类对象,并调用新的方法

       1: var app = new Simple.Class();
       2: app.runAll();   //Welcome to the app     Goodbye
  4. 重载的另一种写法

       1: Simple.Class.override({
       2:    // New members...
       3: });

 

 

实际例子:

 

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);

     }    

});

 

 




 

你可能感兴趣的:(extjs4)