handler to button in Ext.XTemplate

[loadbrain]

Hello,
is this possible anyway?

I have a JsonStore loading data.
In a Panel I show the store with a DataView which uses XTemplate to render the data
In the XTemplate I would like to include a button to click on.
But how can I register a handler to the button in the XTemplate?

[mjlecomte]

Posting your code might be appropriate.

[loadbrain]

This is my template:

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="thumb-wrap" id="{name}">',
        '<img src="{url}" title="{name}">',
        '<span>Name: {name} {vorname}, {alter} Jahre',
        '<input type="button" name="addButton" value="Add" id="addButton" /></div>',
    '</tpl>'
);

This is the code for the panel where the DataView is loaded with the data of store (JsonStore)

var panel = new Ext.Panel({
    id:'images-view',
    frame: true,
    width:535,
    autoHeight:true,
    collapsible:true,
    layout:'fit',
    title:'',
    items: new Ext.DataView({
        id: 'myView',
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No images to display'
    })

});
panel.render('myPanel');

I know want to be able to react on a click event on the "Add" button.

How can I do this?

[Animal]

Use the DataView's click event, and just check the target is a button.

BTW, ids must be unique. You will end up with several "addButton" buttons.

[loadbrain]

Puh, could you maybe give a little piece of code for a beginner

[mabello]

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
	var data = [["xx", "aa", "fff", "cco"]];
	
	var tpl = new Ext.XTemplate(
	    '<tpl for=".">',
	        '<div class="thumb-wrap" id="{name}">',
	        '<img src="{url}" title="{name}">',
	        '<span>Name: {name} {vorname}, {alter} Jahre',
	        '<input type="button" name="addButton" value="Add"/></div>',
	    '</tpl>'
	);
	
	 var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'name'},
           {name: 'url'},
           {name: 'vorname'},
           {name: 'alter'}
        ],
		data: data
    });
	
	var panel = new Ext.Panel({
	    frame: true,
	    width:535,
	    autoHeight:true,
	    collapsible:true,
	    layout:'fit',
	    title:'',
	    items: new Ext.DataView({
	        store: store,
	        tpl: tpl,
	        autoHeight:true,
	        multiSelect: true,
	        overClass:'x-view-over',
	        itemSelector:'div.thumb-wrap',
	        emptyText: 'No images to display',
			listeners:{
				click: function(dataView, index, node, e ){
					var target = e.getTarget();
					if(target.name == "addButton"){
						alert("doStuff");
					}
				}
			}
	    })

	});
	panel.render('xx');
});

[loadbrain]

Wow!
Thanks a lot!!!
Now I understand!
Really, really, thanks a lot!!!

[mabello]

You are welcome!

[loadbrain]

Thanks!
I already got the next problem...
With special chars, the german äüöß...

Database is in UTF-8, webpage has utf-8 and even the php site now sends a header with utf-8 (I can see in Firefox) but the json data I have from the database is stripped.
This is what I get:

({"total":"1","results":[{"0":"0","id":"0","1":"M","name":"M","2":"Max","vorname":"Max","3":"55","alter"
:"55"}], "umlaute": "äüöß"})

instead of:

({"total":"1","results":[{"0":"0","id":"0","1":"M","name":"Müller","2":"Max","vorname":"Max","3":"55","alter"
:"55"}], "umlaute": "äüöß"})

I hardcoded the "umlaute": "äüöß" this works....

[mjlecomte]

Try here:
http://extjs.com/learn/Ext_FAQ_Misc#...ious_Languages