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
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>