View Full Version : [DUP] renderTpl in Ext.applyIf()

1 Mar 2012, 12:59 PM
I'm posting the issue in this forum because although the problem may be the work of ExtJS the problem shows itself using the designer.

If I want to create a component in the designer I am able to specify the html to render using the renderTpl config property. However the designer assigns the template html to the renderTpl property in an Ext.applyIf() function. For example:

Ext.applyIf(me, {
renderTpl: [ '<h1>My component</h1>' ]

The problem is that renderTpl has been set to 'null' by ExtJS so this function will never assign the template to the renderTpl property because it is not undefined. Outside the designer I can implement a clumsy workaround by assigning executing the follwing line before the Ext.applyIf() function is called:

me.renderTpl = undefined;

Here's a link to a JSFiddle which provide some sample code and shows the problem:


The example shows the implementation of a simple component which renders its content using a template renderTpl. The component is added to a panel twice. Once using applyIf() which fails. Once using apply() which works just fine.

Questions: Am I missing something? Is there a better workaround? Is there flag in the designer to instruct it to use Ext.apply() in preference to Ext.applyIf() or added the value to the config list outside initComponent()? Is this an ExtJS problem?

2 Mar 2012, 3:12 AM
Same problem affects 'childEls' also.

2 Mar 2012, 9:21 AM
Sounds like an inconsistency in Ext JS that we should be addressing in Sencha Designer.

We'll take a look at it.

17 Dec 2012, 8:57 PM
I'm having the same problem. I've tried all manner of different strings, attempts at objects, and so on, but literally nothing works. If you've solved this and just not updated this thread, I'd appreciate an example of literally any string I can put in the renderTpl property that will not crash the entire page.

26 Dec 2012, 8:38 AM
Can you give us examples of what you're trying?

In general using renderTpl is an extreme measure that's typically not needed. Are you using the box component?

26 Dec 2012, 10:40 AM

The issue was found creating a lightbox component for use with ExtJS. As you know, lightboxes have a particular style so don't lend themselves to whatever is the current ExtJS style. A link to an example is available from my post (2nd last) in this thread:


In this case using renderTpl is by far and away the easiest way to implement an ExtJS component.

On line 345 of the example (gallery.html) there is a statement which is intended to workaround the problem:

this.renderTpl = undefined;

You will look at this an ask why is ApplyIf() being used on the next line. As you will see from the comments just above this statement, in this example I'm is simulating what goes on in Sencha Architect. In SA is not displayed in the designer because the code generated by SA is AppyIf() not Apply().

On ExtJS initialization of a component it assigns:

renderTpl = null;

As a result ApplyIf() will not set renderTpl to anything else because ApplyIf() only applies config items to undefined properties. renderTpl is not 'undefined', its 'null'.

In the example on the end of the link above setting renderTpl to undefined is easy. Within SA, not so much. In SA its necessary to create an override. As a result, SA is unable to generate the correct code nor is it able to display the component in the designer.

It seem clear to me that renderTpl should not be set to null by ExtJS. If renderTpl is deprecated this should be noted more clearly in the documentation. If renderTpl is supposed to work, then it will be ideal that it does work.