When is a template (.tpl) displayed for an Ext JS component?

Question

I am trying to insert another component into the element that is displayed by another Coomponent..but template in the afterrender event, the template is not yet displayed, so calling Ext.get (el-id) returns null: TypeError el is null .

  tpl: new Ext.XTemplate( '<tpl for=".">', '<ul>', '<li class="lang" id="cultureSelector-li"></li>', '</ul>', '</tpl>' ), listeners: { afterrender: { fn: function (cmp) { console.log(Ext.get('cultureSelector-li')); // < null :[ Ext.create('CultureSelector', { renderTo: 'cultureSelector-li' }); } } }, 

So, when can I add this component so that the element targets the DOM object?

Answer 1

It turns out I used the wrong things - apparently we should use the render * configurations for this type of thing (so what are the tpl and data configurations for?)

Here's a working fiddle provided for me on the sencha forums:

http://jsfiddle.net/qUudA/10/

Answer 2

I think it depends on the component you are working with. For example, the Data Grid View has a “viewready” event that will suit your needs, and depending on what you are trying, the “boxready” function may work in the list box (only the first render). In addition, you can either go through the parent element classes that are looking for the called XTemplate rendering function (maybe in the layout manager), and expand it to fire an event there, or risk a racing state, and just do it in setTimeout () with a reasonable delayed.

Answer 3

I finished the job myself. So now I have a template as a property called theTpl , and then it is displayed in beforerender , and then I was able to get the element descriptor in afterrender . It seems completely counter-intuitive, does anyone have an understanding?

 beforeRender: { fn: function (me) { me.update(me.theTpl.apply({})); } }, 

change , I just extended the component like this:

 Ext.define('Ext.ux.TemplatedComponent', { extend: 'Ext.Component', alias: 'widget.templatedComponent', template: undefined, beforeRender: function () { var me = this; var template = new Ext.XTemplate(me.template || ''); me.update(template.apply(me.data || {})); me.callParent(); } }) 

... template accepts an array of html fragments