Results 1 to 3 of 3

Thread: Inheritance from customized component

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
      0  

    Default Inheritance from customized component

    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:

    Code:
    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
    Last edited by mitchellsimoens; 13 Mar 2012 at 10:09 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    The base component should look for a new config that the subclasses can set.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
      0  

    Default

    thanks. can you elaborate?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •