Ext JS xtemplate set data to a specific value

Question

I want to be able to change a specific value in my data

data : {"active" : 'Y', 'label': 'Don't change this'},
            action : 'autoBandActive',
            margin: '0 0 10 0',
            tpl : new Ext.XTemplate(
                    '<div class="row">',
                    '<div class="pay-label" data-qtip="{label}">{label}</div>',
                    '<tpl if="active == \'Y\'">',
                    '<span class="active">Active</span>',
                    '<tpl else>',
                    '<span class="inactive">Inactive</span>',
                    '</tpl>',
                    '</div>'
            )

in controller tpl.setData({"active": 'N'}, but the label gets deleted. I don't want to do this tpl.setData({"active": 'N', 'label', 'new-label'}. I just want to change the active variable

Answer 1

Assuming that you mean component.setData() and not tpl.setData(), then you would do something like:

Ext.onReady(function() {
    var c = new Ext.Component({
        renderTo: document.body,
        tpl: '{a}{b}',
        data: {
            a: 1
        }
    });

    setTimeout(() => {
       c.setData(Ext.apply({b: 2}, c.getData()));
    }, 2000);
});

Fiddle