1. #1
    Ext User
    Join Date
    Feb 2009
    Posts
    22
    Vote Rating
    1
    loadbrain is on a distinguished road

      0  

    Default handler to button in Ext.XTemplate

    handler to button in Ext.XTemplate


    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?

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Posting your code might be appropriate.

  3. #3
    Ext User
    Join Date
    Feb 2009
    Posts
    22
    Vote Rating
    1
    loadbrain is on a distinguished road

      1  

    Default


    This is my template:
    Code:
    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)
    Code:
    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?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Feb 2009
    Posts
    22
    Vote Rating
    1
    loadbrain is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    HTML Code:
    /*
     * 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');
    });

  7. #7
    Ext User
    Join Date
    Feb 2009
    Posts
    22
    Vote Rating
    1
    loadbrain is on a distinguished road

      0  

    Thumbs up


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

  8. #8

  9. #9
    Ext User
    Join Date
    Feb 2009
    Posts
    22
    Vote Rating
    1
    loadbrain is on a distinguished road

      0  

    Default


    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:
    Code:
    ({"total":"1","results":[{"0":"0","id":"0","1":"M","name":"M","2":"Max","vorname":"Max","3":"55","alter"
    :"55"}], "umlaute": "äüöß"})
    instead of:
    Code:
    ({"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....

  10. #10