1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Answers
    7
    Vote Rating
    2
    UbuntuPenguin is on a distinguished road

      0  

    Default Unanswered: Listen to Button in XTemplate.

    Unanswered: Listen to Button in XTemplate.


    TL;DR How do I listen to a button click when the button is in the HTML of an XTemplate

    Hello Everyone,
    I have a button in my XTemplate, and I would like to listen to it when it gets clicked, and have access to the record that is the data object of the renderer.

    Here is the XTemplate.

    Code:
    Ext.define('Kessler.templates.LocationListTemplate', {
        extend: 'Ext.XTemplate',
        constructor: function (config) {
            var html = [
                '<div class="locationTplBox"  id="{storeaddress1}">' +
                    '<div class="image-box">' +
                    '   <img class="store-image" alt="image" src="assets/{storeimageurl}">' +
                    '</div>' +
                    '<div class="location-box">' +
                        '<div>{storename}</div>' +
                        '<div>{storeaddress1}</div>' +
                        '<div>{storecity},{storestateabbrev}</div>' +
                        '<div>{storezipcode}</div>' +
                    '</div>' +
                    '<div class="time-box">' +
                        '<div>M-F 9a - 10p</div>' +
                        '<div>Sat 7a - 11p</div>' +
                        '<div>Sat 10a - 12p</div>' +
                    '</div>' +
                    '<div class="selection-box">' +
                        '<button class="storebutton" type="button">' +
                            '<span>Set as</span><br />' +
                            '<span>Selected Store</span>' +
                        '</button>' +
                    '</div>' +
                '</div>'];
            this.callParent(html);
        }
    });
    I would like to listen to the "storebutton" item, but I can't do it to any avail. Thus far I have tried this following piece of code in one of my controllers, it was based of off a post found in the Ext JS(2) archives from 2008. Needless to say it failed spectacularly.

    Code:
    ...
            this.control({
                'storebutton': {
                    click : this.storeButtonClick
                }
            });
    ...

    Any help is greatly appreciated.

  2. #2
    Sencha User blakdronzer's Avatar
    Join Date
    Jan 2011
    Location
    Mumbai, India
    Posts
    27
    Answers
    3
    Vote Rating
    0
    blakdronzer is on a distinguished road

      0  

    Thumbs up


    Well as what i see in your code, storebutton is a classname and not any element / component


    ... this.control({ 'storebutton': { click : this.storeButtonClick } });...So, here in this case you can try working out with

    ... this.control({ '.storebutton': { click : this.storeButtonClick } });...

    May be this should help out.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Answers
    7
    Vote Rating
    2
    UbuntuPenguin is on a distinguished road

      0  

    Default


    Thanks blackdronzer,
    But unfortunately that didn't fix the problem. I believe I have found another way to do it, but I am having another, yet different problem.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    13
    Vote Rating
    0
    koenoe is on a distinguished road

      0  

    Default


    UbuntuPenguin, how did you fix it? Because I've the same problem with an input and onchange event.

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Answers
    7
    Vote Rating
    2
    UbuntuPenguin is on a distinguished road

      0  

    Default


    Sorry koenoe, I didn't actually get to fix it the way I wanted. I just ended up removing the XTemplate button and instead started listening for the list component click.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Location
    Singapore
    Posts
    11
    Vote Rating
    1
    sevenshot is on a distinguished road

      0  

    Default newbie here!

    newbie here!


    How do you listen to a button element inside an XTemplate? I got 2 senario's below: <button> and <input>

    Code:
    config:{
    ...
    tpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="match-detail">',
                    '<div>',
                        '<div><h1>{firstName} {lastName}</h1> from {league} - <i>{division}</i></div><br/>',
                        '<button class="watchButton" id="watch">Add to Watchlist</button>',
                        '<input type="button" name="watchButton" value="Add to Watchlist"/>',
                    '</div>',
                '</div>',
            '</tpl>'),
    }
    Please help

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    13
    Vote Rating
    0
    koenoe is on a distinguished road

      0  

    Default


    You can't.. Use a dataview with dataitems instead.

  8. #8
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    The XTemplate end by being used like this:


    tpl[tplWriteMode](me.getInnerHtmlElement(), newData);
    where `tplWriteMode` is often `overwrite`

    Code:
    Ext.define('MyXTemplate',{
    extend:'Ext.XTemplate',
    config:{
          
    },
    
     overwrite: function(el, values, returnElement) {        
    var ret = this.callParent(arguments),        
           btnEl = ret.down('.
    watchButton
    '); if(btnEl) { btnEl.on('tap', Ext.bind(some_dramatic_handler, some_tragic_scope) ); } return ret; } });
    and in your implementation you will use, tpl: new MyXTemplate(....)

    @koenoe so it is possible

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Location
    Singapore
    Posts
    11
    Vote Rating
    1
    sevenshot is on a distinguished road

      0  

    Default


    I hope its not too much to ask for a working code please? Maybe a proper setup just enough to trigger the event

  10. #10
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    :P


    Code:
    Ext.application({
        name: 'MyApp',
        
        launch: function() {
            var me=this;
            Ext.define('MyXTemplate',{
                extend:'Ext.XTemplate',
                config:{
                    isTemplate:true
                },
                
                overwrite: function(el, values, returnElement) {        
                    var ret = this.callParent(arguments);
                        console.log(ret);
                    var    btnEl = Ext.get( ret ).down('.watchButton');
                    if(btnEl)        {           
                        btnEl.on('tap', Ext.bind(me.onWatch, me) );        
                    }
                    
                     var    aEl = Ext.get( ret ).down('a');
                    if(aEl)        {           
                        aEl.on('tap', Ext.bind(me.onNotWatch, me) );        
                    }
                    return ret;
                }
            });
            Ext.Viewport.add({
                xtype:'panel',
                layout:'fit',
                tpl:new MyXTemplate('<div><input class="watchButton" type="button" value="watch"/> <a href="#">don`t watch</a></div>'),
                data:{}
            });
        },
        onWatch:function()
        {
            alert('watch');
        },
        onNotWatch:function()
        {
            alert('don`t watch');
        }
    });

    http://www.senchafiddle.com/#PzQ0a

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi