PDA

View Full Version : Inheritance from customized component



xun
13 Mar 2012, 7:46 AM
I am not sure how to realize inheritance from a customized component.

For example, i have a dummy component that will write out the basic skeleton, into which all children components need to be able to add new component.

The dummy component is as such:


Ext.define('Ext.csx.modules.baseCmp', {
extend: 'Ext.Component',
initComponent: function () {


this.renderTpl = new Ext.XTemplate(
'<div>',
'<div class="moduleHeaderWrapper">',
'<div id="{id}-module-header" class="moduleHeader"><h1>{title}</h1></div>',
'</div>',
'<div class="vBuffer10"><div></div></div>',
'<div class="moduleBodyWrapper" id="{id}-module-body">',
'</div>',
'</div>'
);


this.childEls = ["module-header", "module-body"];
this.callParent();
}
});

Now a dummy child:

Ext.define('Ext.csx.modules.TabbedModule', {
extend: 'Ext.csx.modules.baseCmp',


activeCls: 'active',




initComponent: function () {


console.log("tabbed init");



this.renderTpl = '<div id="test1"></div><div id="test2"></div>';

this.tabs = new Ext.util.MixedCollection();
this.callParent();
},


afterRender: function () {
console.log("tabbed after render");
console.log(this.childEls);
this.callParent();
}
});

How can i have the child component render its own customized tpl into either the header of the base component?

Thanks

mitchellsimoens
13 Mar 2012, 10:12 AM
The base component should look for a new config that the subclasses can set.

xun
13 Mar 2012, 10:29 AM
thanks. can you elaborate?