Search code examples
javascriptinheritancesencha-touch-2

Sencha Touch 2: Extending XTemplate - can I inherit parents member functions?


I want to know if there is a way to access the set of member functions of a XTemplate? I'm extending a view and want to override the XTemplate, but want to keep the member functions of the parent XTemplate.

Here is a example - my base class:

Ext.define( 'my.view', {

xtype: 'myview',

config: {

    itemTpl: new Ext.XTemplate(
    [
            '<p>Name: {name}</p>',
            '<p>Kids: ',
            '<tpl for="kids">',
                '<tpl if="this.isGirl(name)">',
                    '<p>Girl: {name} - {age}</p>',
                '</tpl>',
                 // use opposite if statement to simulate 'else' processing:
                '<tpl if="this.isGirl(name) == false">',
                    '<p>Boy: {name} - {age}</p>',
                '</tpl>',
                '<tpl if="this.isBaby(age)">',
                    '<p>{name} is a baby!</p>',
                '</tpl>',
            '</tpl></p>'
     ].join( "" ),
    {
        // XTemplate configuration:
        compiled: true,
        // member functions:
        isGirl: function(name){
           return name == 'Sara Grace';
        },
        isBaby: function(age){
           return age < 1;
        }
    }
    );
  }
});

what the "child" should basically look like:

Ext.define( 'my.subview', {

xtype: 'myview',

extend: 'my.view',

config: {

    itemTpl: new Ext.XTemplate(
    [
            '<p>Something completely different here</p>'
     ].join( "" ),
    //this.superclass.getMemberFunctions()
    );
  }
});

Thnaks in advance!


Solution

  • You can't do it the way you've described, but perhaps you can take an alternate approach.

    Rather than expecting the XTemplate to inherit functionality (something I'm not really sure it can do), just define the member properties/functions somewhere you can reuse them. For example:

    Ext.define( 'my.view', {
        xtype: 'myview',
    
        config: {
            xtemplateStuff : {
                // XTemplate configuration:
                compiled: true,
    
                // member functions:
                isGirl: function(name){
                   return name == 'Sara Grace';
                },
                isBaby: function(age){
                   return age < 1;
                }
            }
        },
    
        initialize : function() {
            this.setItemTpl(new Ext.XTemplate([
                'stuff...',
                this.getXtemplateStuff()
            ]));
        }
    });
    

    And because anything in config will be inherited, you can do this in the child view:

    Ext.define( 'my.subview', {
        extend: 'my.view',
    
        initialize : function() {
            this.setItemTpl(new Ext.XTemplate([
                'different stuff...',
                this.getXtemplateStuff()
            ]));
        }
    });