StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can update the template using <code>obj.tpl = new XTemplate("my name is {y}");</code></p> <p>This works:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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() });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>For me, they are two distinct objects since you've completely different templates. You could destroy one and render the other in its place:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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() });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload