View Full Version : Need a sample to add xtype inside xTemplates rather than normal html tags.

24 Aug 2011, 8:21 AM
Hi i tried to use xTemplates few days back. Im ok when i uses html tags inside xTemplates but when i tried to create extjs controls am getting just string (some thing like new Ext.form.FormPanel({width : 350,items:[{fieldLabel :"fun",name:"fun",id : "link1",inputType : text,}]});) instead of controls. Can any one tell me how to add xtype or control inside xTemplate?

Code : Ext.onReady(function(){

var html = new Ext.form.FormPanel({
width : 350,
fieldLabel :'{text}',
id : '{id}',
inputType :'text'

var tpl = new Ext.XTemplate(html);

tpl.append('blog-roll', {
id: 'link1',
title: 'title1',
text: "fun"


24 Aug 2011, 11:29 AM
The XTemplate engine is not designed to render components. You would have to manage resize and destroy of components when data changes, etc.

26 Aug 2011, 1:05 AM
The XTemplate engine is not designed to render components. You would have to manage resize and destroy of components when data changes, etc.

Thanks jgarcia... i hope we can create components by directly mentioning extjs css class names inside our XTemplate. Have to check whether is it possible to access those components from a view inside a controller using DomQuery.

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-form-item"><label class="x-form-item-label"> Sample:</label>',
'<div style="padding-left: 105px;" class="x-form-element">',
'<div class="x-form-display-field">{name}</div>',
'</div>' ',
'</tpl>' );

26 Aug 2011, 9:15 PM
am i missing something?

26 Aug 2011, 10:13 PM
The HTML representation is only one part of what makes an Ext.Component a component. The even more important part is the javascript object that represents a component 'in memory' and defines all the 'invisible' logic and behavior that is expressed in Javascript code and not HTML.
Actually, it is this javascript object that will create the HTML markup when the Ext framework tells the component to render itself. To do this, it might use an XTemplate internally.

Ext does *not* parse the HTML and then instantiate component classes, I assume that is your misunderstanding.

Ext has a very neat UI component architecture and rendering/layout framework, and there are zillions of ways to customize or extend standard components. It is also easy to create a number of UI component instances/objects with custom configuration using Javascript (but not XTemplate).

Not sure what you are trying to achieve.

Do you want to create components dynamically based on data from a server?
Do you need to modify/tweak the HTML representation of a specific Ext component class?

28 Aug 2011, 5:24 AM
Thanks for your detailed explanation mberrie =D>. Am new to Extjs and am trying to create components dynamically based on the data from server. Im having data inside a store and using XTemplates iterates the store values to generate the components.Is it possible to do this with XTemplate ?