Extjs4 类的定义和扩展实例

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

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

  

复制代码 代码如下:

  Ext.define('Simple.Class',{

  welcome:function(){

  alert('Welcome to the app');

  }

  });

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

  

复制代码 代码如下:

  Ext.override(Simle.Class,{

  goodBye:function(){

  alert('Goodbye');

  },

  funAll:function(){

  this.welcome();

  this.goodBye();

  }

  });

  实例化类对象,并调用新的方法

  

复制代码 代码如下:

  var app = new Simple.Class();

  app.runAll(); //Welcome to the app Goodbye

  重载的另一种写法

  

复制代码 代码如下:

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

  }

  });