1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Toronto
    Posts
    105
    Vote Rating
    2
    basememara is on a distinguished road

      0  

    Default Unanswered: How to override tpl of children items during parent class create?

    Unanswered: How to override tpl of children items during parent class create?


    In my viewport, I am trying to pass a custom template to one of the children components like this:
    Code:
    var w = Ext.create('widget.somelist', {
                        title: 'Custom Test',
                        customTpl:  [
                             '<tpl for=".">',
                                 '<div class="title">{Name} ZZZZ</div>',
                            '</tpl>'
                        ]
                    });
        
                    //TRIED THIS TO
                    w.setCustomTpl( [                         '<tpl for=".">',
                                 '<div class="title">{Name} ZZZZ</div>',
                            '</tpl>'
                        ]);
                    }
    This is what my class looks like, but this.customTpl remains null and never gets the value passed by the viewport:
    Code:
    Ext.define('MyApp.ui.SomeList', {
        extend: 'Ext.Panel',
        alias: 'widget.somelist',
    
       customTpl: null,
    
    
        items: [
            {
                xtype: 'dataview',
                store: 'Something',
                itemTpl: this.customTpl || [
                    '<tpl for=".">',
                        '<div class="title">{Name}</div>',
                    '</tpl>'
                ]
            }
        ]
    });
    Any ideas on how to pass a custom template to the child during the class create?

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Location
    Toronto
    Posts
    105
    Vote Rating
    2
    basememara is on a distinguished road

      0  

    Default


    I think this is what you do (which works!):

    Code:
    var w = Ext.create('widget.somelist', {
                        title: 'Custom Test',
                        customTpl:  [
                             '<tpl for=".">',
                                 '<div class="title">{Name} ZZZZ</div>',
                            '</tpl>'
                        ]
                    });
    Code:
    Ext.define('MyApp.ui.SomeList', {    extend: 'Ext.Panel',
        alias: 'widget.somelist',
    
        //CUSTOM PROPERTIES
        customTpl: null,
    
        initComponent: function() {
            //OVERRIDE CHILDREN TEMPLATES IF APPLICABLE
            if (this.customTpl) {
                this.items[0].itemTpl = this.customTpl;
            }
            this.callParent(arguments);
        },
    
        items: [
            {
                xtype: 'dataview',
                store: 'Something',
                itemTpl: this.customTpl || [
                    '<tpl for=".">',
                        '<div class="title">{Name}</div>',
                    '</tpl>'
                ]
            }
        ]
    });
    I have a feeling that the new "config" properties that were introduced in Touch 2 would make this cleaner. Is there a better way to do this with Ext JS 4.1?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar