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