Extjs - 如何改变|替换tpl变量

Question

我有'myview'扩展面板并使用tpl之类的

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

我不想使用myview.update（{some：“...”}）;当我点击一个按钮时，我希望通过新的tpl更改tpl。我用

myview.tpl = "change" // not working

我该怎么做呢谢谢

Answer 1

您可以使用obj.tpl = new XTemplate("my name is {y}");

更新模板

这有效：

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>

对我来说，它们是两个不同的对象，因为你有完全不同的模板。你可以摧毁一个并在另一个地方渲染另一个：

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>