Inheritance from customized component

[xun]

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]

The base component should look for a new config that the subclasses can set.

[xun]

thanks. can you elaborate?