XTemplate and component

**stefx** · 18 Aug 2010 9:33 AM

Hi to all, I've a List object with an XTemplate. I try to insert a toggle into a template with this code:

Code:

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function(){
        Ext.regModel('tipi', {
            fields: [
				{name: 'id',  type: 'int'},
				{name: 'descrizione',   type: 'string'},
				{name: 'valore',   type: 'int'}				
            ]
        });

        var store = new Ext.data.Store({
            autoLoad: true,
            proxy: {
                url: 'data.json',
                type: 'ajax',
                reader: 'json'
            },
            model: 'tipi'
        });
        var tplTipi = new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="tipi">',        	    		
					'<div>{[new Ext.form.Toggle({value: values.valore, label: values.descrizione, renderTo: "toggleElId"}).show().getEl().getHTML()]}</div>',
				'</div>',
			'</tpl>',
			{
				compiled: true
			}
		)
        var demo = new Ext.Panel({
            fullscreen: true,
            scroll: 'vertical',
            items: [{
                xtype: 'list',
                id: 'tipilist',
                tpl: tplTipi,
                itemSelector: 'div.tipi',
                singleSelect: true,
                store: store
            }]
        });
    }
});

This is my html page:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta http-equiv="Pragma" content="no-cache">
	<meta name="viewport" content="height=device-height,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
	<meta name="apple-mobile-web-app-capable" content="yes" />

    <title>Temp</title>
	<link rel="stylesheet" href="ext-touch.css" type="text/css">
	<script type="text/javascript" src="ext-touch-debug-w-comments.js"></script>    
	<script type="text/javascript" src="index_temp.js"></script>
    	
</head>
<body onorientationchange ="setTimeout(function(){window.scrollTo(0,1)},100);" onload ="setTimeout(function() {window.scrollTo(0,1)},100);">
<div style="display:none;" id="toggleElId"></div>
</body>
</html>

I try to render a toggle in a invisible div (toggleElId) to get the HTML to insert in a template. with {[new Ext.form.Toggle({value: values.valore, label: values.descrizione, renderTo: "toggleElId"}).show().getEl().getHTML()]} I get the html but I can't see anything in a page. Otherwise, with <div style="display:block;" id="toggleElId"></div> the script return a toggle but two times... so, double toggle...

Any idea?
Thanks a lot
Stefano

**evant** · 18 Aug 2010 4:40 PM

It's not supported to do it that way. If you really must insert components into the list, then do it after the list has rendered, then you can enumerate over the elements and just render the toggle in there directly.

**stefx** · 19 Aug 2010 2:13 AM

Ok, thanks.
stefano

**obusek** · 1 Sep 2010 12:14 PM

Originally Posted by evant

It's not supported to do it that way. If you really must insert components into the list, then do it after the list has rendered, then you can enumerate over the elements and just render the toggle in there directly.

Would you please provide a sample code snippet of how to do this? Assume we already have a List object created, and we just want to iterate over each row and add a basic Panel. Thank you

**obusek** · 1 Sep 2010 12:24 PM

I was thinking something list this:

Code:

productsList.items.each(function(item, idx, len) {
    alert("1");
    item.add(new Ext.Button({text:idx}));
});

but the alert inside the loop is never shown... productsList is a List that shows up successfully on the screen.

**dhawalkote** · 26 Apr 2011 11:40 PM

For me, it worked like this.
Add listener for the list.

Code:

listeners:{
		refresh: function(){
			var list = this;
			this.store.data.each(function(item, idx, len){ var btn = new Ext.Button({text: 'Btn'}); btn.render(list.all.elements[idx])});
		}
	}

XTemplate and component

Thread Tools

Search Thread

Display

XTemplate and component

XTemplate and component

Similar Threads

[SOLVED] Using an XTemplate component in a toolBar.

DataView + XTemplate + Ext.Component

Tags for this Thread