component with tpl and setData()

[estesbubba]

So the template renders correctly and the first setData() works as expected, but each additional call to setData() doesn't work. Keep clicking the button to see and look at the console to see that the data is actually changed.

Ext.application({
    name: 'App',
    
    total: 0,
    accountData: {
        name: 'Mike',
        inserted: 0
    },
    accountTpl: [
        '<div class="c-account-info">',
            '<div class="c-name">{name}</div>',
            '<div class="c-inserted-hdr">Cash Inserted</div>',
            '<div class="c-inserted">$ {inserted}</div>',
        '</div>'
    ],


    
    launch: function(options) {
        Ext.Viewport.setActiveItem({
            xtype: 'container',
            layout: {
                type : 'vbox',
                align: 'middle'
            },


            items: [{
                xtype: 'component',
                itemId: 'accountData',
                tpl: this.accountTpl,
                data: this.accountData
            }, {
                xtype: 'button',
                text: 'Click to add $5',
                handler: function() {
                    var data = this.accountData;


                    this.total += 5;
                    data.inserted = this.total;
                    console.log(Ext.encode(data));
                    Ext.Viewport.down('#accountData').setData(data);
                },
                scope: this
                    
            }]
        })
    }
});

[mitchellsimoens]

It looks like the object this.accountData and the object _data on your component are being shared meaning the data was not cloned. It works as expected when you do:

Ext.application({
    name: 'App',

    total: 0,
    accountData: {
        name: 'Mike',
        inserted: 0
    },
    accountTpl: [
        '<div class="c-account-info">',
            '<div class="c-name">{name}</div>',
            '<div class="c-inserted-hdr">Cash Inserted</div>',
            '<div class="c-inserted">$ {inserted}</div>',
        '</div>'
    ],



    launch: function(options) {
        Ext.Viewport.setActiveItem({
            xtype: 'container',
            layout: {
                type : 'vbox',
                align: 'middle'
            },


            items: [{
                xtype: 'component',
                itemId: 'accountData',
                tpl: this.accountTpl,
                data: this.accountData
            }, {
                xtype: 'button',
                text: 'Click to add $5',
                handler: function() {
                    var data = Ext.apply({}, this.accountData);


                    this.total += 5;
                    data.inserted = this.total;
                    console.log(Ext.encode(data));

                    var cmp = Ext.Viewport.down('#accountData');
                    cmp.setData(data);
                },
                scope: this

            }]
        })
    }
});

I will still open this bug as we need to clone the object ourselves so this doesn't happen.

[estesbubba]

Thanks for the workaround. Put it in and it works now.