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