Extjs之组件继承

传统的下拉框组件实现方式如下:

Ext.onReady(function(){var combobox=new Ext.form.ComboBox({readOnly:true,displayField:'text',valueField:'text',triggerAction:'all',emptyText:'Please select ..',store:new Ext.data.Store({proxy:new Ext.data.MemoryProxy([['girl'],['boy']]),reader:new Ext.data.ArrayReader({fields:['text']})}),renderTo:Ext.getBody()});});

实现组件的继承:

Ext.ux.EasyCombo=Ext.extend(Ext.form.ComboBox,{initComponent:function(){this.readOnly=true;this.displayField='text';this.valueField='text';this.triggerAction='all';this.mode='local';this.emptyText='please select....';this.store=new Ext.data.ArrayStore({expandData:true,fields:['text']});this.store.loadData(this.data);Ext.ux.EasyCombo.superclass.initComponent.call(this);}});

组件继承的一些准备知识,当创建一个组件时会按照以下顺序对组件进行初始化:

调用Ext.Apply()复制参数;

调用addEvents()添加事件;

调用Ext.ComponentMgr.register(this)注册当前组件;

调用initComponent()初始化组件;//留给我们的扩展点

调用initPlugin()初始化插件;

调用initState()初始化状态;

调用applyToMarkup()或者render()进行组件渲染;

 

常用的辅助函数:

Ext.apply()

Ext.applyIf()

 

使用xtype:

Ext.reg('easycombo',Ext.ux.EasyCombo);