View Full Version : How to insert other text in an ExtJS XTemplate tpl?

29 May 2014, 8:45 AM
UPDATE - SOLVED - I solved this by adding to the data in my setLinks() method, and then referencing the value like this: {baseText}

I am using an XTemplate in my custom component to generate LI elements in an UL element.

But elsewhere in the HTML, outside the tpl definition, I need to insert text from another config into a span in the HTML.

So in the code below, the tpl generates the LI elements, but I need this.baseText to be inserted into the span element. baseText will not change, but I can't just hard code it because it will differ for localization.

Currently the span displays UNDEFINED.

Ext.define('MyQuickLinks', {
extend: 'Ext.Component',
alias: 'widget.myQuickLinks',

baseText: 'Quick Links',

// Use an XTemplate to dynamically create the quick link HTML.
tpl: new Ext.XTemplate(
'<div style="border-bottom-style: solid; border-bottom-color: #666666; border-bottom-width: 1px; margin-bottom: 5px;">' +
'<div style="border-bottom-style: solid; border-bottom-color: #666666; border-bottom-width: 1px; padding-bottom: 4px;">' +
'<span style="font-weight: bold; font-size: 12px;">{baseText}</span>' +
'</div>' +
'<ul style="list-style-type: none; font-size: 12px; margin-top: 4px; margin-left: 10px;">' +
'<tpl for=".">' +
'<li>{label}</li>' +
'</tpl>' +
'</ul>' +

setLinks: function(data) {
data.baseText = this.baseText;

29 May 2014, 8:50 AM
You can't do that. Think about the order in which the statements get executed. The whole RHS of the object definition needs to be processed before it's ever passed to define. You can't refer to "this" because it doesn't exist yet, the class configuration has yet to be created.

You could setup the tpl in either initComponent or in an after definition processor.


Ext.onReady(function() {

Ext.define('X', {
extend: 'Ext.Component',
someProp: 'Ok',
html: ''
}, function(cls) {
cls.prototype.html = cls.prototype.someProp;

new X({
renderTo: document.body


29 May 2014, 8:54 AM
Actually I solved it in a simple way. I updated my post and updated the code.