Extjs - How to change | replace tpl variable

1
votes

I have 'myview' extend panel and using tpl like

extend: 'Ext.Panel',
tpl: '<b>ab </b>{some}'

I don't want using myview.update({some: "..."}); i want change tpl by new tpl when i click a button. I using

myview.tpl = "change" // not working

How can i do that thanks

1
extjsextjs4.1

1 Answers

3
votes

You can update the template using obj.tpl = new XTemplate("my name is {y}");

This works:

Ext.define('My.Example', {
    extend: 'Ext.Panel',
    tpl: 'hello {x}'
});

var panel = new Ext.create('My.Example', {
    data: {
        x: 'World'
    },
    renderTo: Ext.getBody()
});

var button = new Ext.create('Ext.button.Button', {
    text: "click me",
    listeners: {
        click: function () {
            panel.tpl = new Ext.XTemplate('my name is {y}');
            panel.update({
                y: 'monkey magic'
            });
        }
    },
    renderTo: Ext.getBody()
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>

For me, they are two distinct objects since you've completely different templates. You could destroy one and render the other in its place:

Ext.define('My.Example', {
    extend: 'Ext.Panel',
    tpl: 'hello {x}'
});

Ext.define('My.Example2', {
    extend: 'Ext.Panel',
    tpl: "My name is {y}"
});

var panel = new Ext.create('My.Example', {
    data: {
        x: 'World'
    },
    renderTo: Ext.getBody()
});

var button = new Ext.create('Ext.button.Button', {
    text: "click me",
    listeners: {
        click: function () {
            panel.destroy();
            panel = Ext.create('My.Example2', {
                data: {
                    y: 'monkey magic'
                },
                renderTo: Ext.getBody()
            });
        }
    },
    renderTo: Ext.getBody()
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>