Diff between initcomponent and constructor:
1.if we use initcomponent to intialize values, it must be extended to any existing component in extjs(button,panel,text), where as in constructor we can define class without extending to a existing component.
ex:
initcomponent:
Ext.define('test', {
extend: 'Ext.panel.Panel',
constructor:
Ext.define('test', {
The
initComponent template method is an important initialization step for a
Component. It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. The
initComponent method of the class being created is called first, with each
initComponent method up the hierarchy to Ext.Component being called thereafter. This makes it easy to
implement and, if needed, override the constructor logic of the Component at
any step in the hierarchy.
The initComponent method must contain a call to callParent in order to ensure that the
parent class' initComponent method is also called.
All config options passed to the constructor are
applied to
this before
initComponent is called, so you can simply access them with this.someOption.
The
following example demonstrates using a dynamic string for the text of a button
at the time of instantiation of the class.
Ext.define('DynamicButtonText', {
extend: 'Ext.button.Button',
initComponent: function() {
var me=this;
me.text = "hello";
me.polo='manikumar';
me.renderTo = Ext.getBody();
me.callParent();//optional
}
});
Ext.define('testinherit',{
extend: 'DynamicButtonText',
initComponent: function(){
var me=this;
me.callParent();
me.on('click', function(){
alert(me.polo);
});}
});
Ext.create('testinherit');
Example
showing usage of initcomponent() and
constructor():
Ext.onReady(function(){
Ext.create('testinherit');
});
Ext.define('DynamicButtonText',
{
extend: 'Ext.button.Button',
initComponent: function() {
var me=this;
me.text = "hello";
me.my_testing_property='Called from parent';
me.renderTo = Ext.getBody();
me.callParent();//optional
}
});
Ext.define('testinherit',{
extend: 'DynamicButtonText',
initComponent: function(){
var me=this;
me.callParent();
me.on('click', function(){
alert(me.my_testing_property);
// alert(me.getMy_testing_property());//doesnt work, it
shouldn't be called like this
});
}
});
Ext.define('My.awesome.Class',
{
config: {
my_testing_property: 'From Parent',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
alert(2);
return this;
}
});
Ext.define('My.awesome.Class.inherit',
{
// The default config
config: {
my_testing_property: 'From Child',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
alert(this.getMy_testing_property()+ ' called from getMy_testing_property()');
alert(this.my_testing_property + ' called from this.my_testing_property');
return this;
}
});
var awesome = new
My.awesome.Class.inherit({
// my_testing_property: 'From Sub Child'
});
alert(awesome.getMy_testing_property() + ' From awesome');// From
Sub Child
Thanks!!
Mani Kumar Yegateeli
No comments:
Post a Comment