tpl and renderTpl use cases

[dougi]

Hi,
I'm confused about the role of the tpl and renderTpl attributes. They can't be use together so i guess they do similar things.
For what i know

• tpl works with data and renderTpl. we can overwrite the content with the component's update method.
• renderTpl works with renderData. We can overwrite the content with the XTemplate's overwrite method.

When should we use one more the other? Have you got some use cases ?

For instance, i want to create a custom component with some internal dom structure. I want to give the user the opportunity to update the content at runtime. Tpl seems fine. Am i wrong?

i find nothing on the forum but if i am wrong feel free to redirect me.

Thanks.

[mitchellsimoens]

renderTpl affects the component's structure. tpl affects the inner html when passing in the data config (or using the update method).

[dougi]

Hi,
thanks but it does not help me that much. I'm currently looking at some Ext component source code to get the concept and come to the point that renderTpl is the solution for custom component.
Besides that, i obviously miss something. Do you have a simple example where tpl could be used with renderTpl. The only example i can find so far with tpl is:

Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
tpl: new Ext.XTemplate(
'<div class="product">',
'<div>{name}:{desc}</div>',
'</div>'
),
data: {
name: 'Product A',
desc: 'Lorem ipsum dolor sit amet'
}
});

Thanks again.

[dougi]

is it the way to use it.

In my custom component, the inner structure is defined with renderTpl and populates with renderData.

renderTpl:[
  '<div>',
    '<div id="inner">',
      '{text}',
    '</div>',
  '</div>]

Then when i instanciate the component, tpl give the opportunity to add a formatted html text inside my inner div. It's up to me to copy inside the component the generated content at the right place inside the inner div.

Ext.create('My.custom.Component', {
  data: {value:'hello world!'},
  tpl: ''<div><p><b>{value}</b></p></div>"
});

Am i right or i definitely miss something?

Thanks.