extjs 자신의 구성 요소 확장

myWindow = function(cfg){
	Ext.apply(this,cfg); // ,apply 
	Ext.onReady(this.init, this);
}

Ext.extend(myWindow, Ext.util.Observable,{
	init: function(){
		
		this.formPanel = new Ext.form.FormPanel({
			width:280,
			height:280,
			labelWidth:50,
			frame:true,
			defaultType:'textfield',
			items:[
				{
				fieldLabel:'name'
				},
				{fieldLabel:'age'}
			],
			buttons:[
			{text:'add'}
			]
		});
		
		this.showWindow = new Ext.Window({
			width:300,
			height:300,
			title:' ',
			items:[this.formPanel]
		});
		this.showWindow.show();
	}
});

new myWindow();

userPanel = Ext.extend(Ext.Window,{
	title:'entend Ext.window',
	width:300,
	height:200,
	buttonAlign:'center',
	layout:'fit',
	initComponent:function(){
		Ext.apply(this,{
			buttons:[{
				text:'new',
				handler:this.saveUser.createDelegate(this)
			},{
				text:'cancel',
				handler:this.cancel.createDelegate(this)
			}]
		}),
		userPanel.superclass.initComponent.call(this),
		this.uf = this.createForm();
		this.add(this.uf);
	},
	createForm:function(){
		var uf = new Ext.form.FormPanel({
			defaultType:'textfield',
			labelAlign:'right',
			labelWidth:50,
			frame:true,
			items:[{
				fieldLabel:' ',
				name:'username',
				allowBlank:false
			},{
				fieldLabel:' ',
				name:'password',
				inputType:'password',
				allowBlank:false
			}]
		});
		return uf;
	},
	saveUser:function(){
		if(this.uf.form.isValid())
		{
			alert("hello ");
		}
	},
	cancel:function(){
		alert('cancel');
	}
	
});

Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	new userPanel().show();
});