[Cookbook Study Ch01]8. Extending Ext JS Components

Ext.onReady(function() {
	Ext.define('Cookbook.DisplayPanel', {

		extend : 'Ext.panel.Panel',

		initComponent : function() {

			// apply our configuration to the class
			Ext.apply(this, {
				title : 'Display Panel',
				html : 'Display some information here!',
				width : 200,
				height : 200,
				renderTo : Ext.getBody()
			});

			// call the extended class' initComponent method
			this.callParent(arguments);
		}

	}, function() {
		console.log('Cookbook.DisplayPanel defined!');
	});

	var displayPanel = Ext.create('Cookbook.DisplayPanel');
	displayPanel.show();

	// define our Cookbook.InfoTextField class
	Ext.define('Cookbook.InfoTextField', {

		extend : 'Ext.form.field.Text',
		/***
		 * override했고 this.callparent를 호출하여.
		 * 바로 부모클래스의 onRender메소드가 실행되도록 하였다.
		 */
		onRender : function() {
			this.callParent(arguments);

			// insert our Info Text element
			Ext.core.DomHelper.append(this.getEl(), '
' + this.infoText
					+ '
');
		}

	}, function() {
		console.log('Cookbook.InfoTextField defined!');
	});

	// create an instance of our Cookbook.InfoTextField
	var infoTextField = Ext.create('Cookbook.InfoTextField', {
		renderTo : Ext.getBody(),
		fieldLabel : 'Username',
		infoText : 'Your Username must be at least 6 characters long.'
	});

//	infoTextField.show();
});
// 출처 : Ext JS4 Web Application Development Cookbook