Results 1 to 3 of 3

Thread: HELP: Delegating Listeners to an ID in XTemplate (ExtJS)

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
      0  

    Default HELP: Delegating Listeners to an ID in XTemplate (ExtJS)

    Oh man! This is so tough...

    Need any help that we can find here regarding Listeners + XTemplate.

    Our Goal: To delegate an 'itemtap' listener to an ID in XTemplate (i.e. div id="xplay").

    Error Received:

    Code:
        Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception 1 undefined event_bindings:207
        chrome.Event.dispatch event_bindings:207
        chromeHidden.Port.dispatchOnMessage miscellaneous_bindings:250
    Here's our XTemplate:

    Code:
            var itemTpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
                    '<img src="http://www.myShortenedUrl.com/{timeImgPath}" />',
                    '<div id="xplay">',
                        '<img src="http://www.starrbc.org/play_button.jpg" />',
                    '</div>',
                '</tpl>'
            );
    Here's our xtype:list with the XTemplate (itemTpl) binded to it.. and an itemtap listener that is delegated to "xplay"

    Code:
                    xtype: 'panel',
                    items: [{
                        xtype: 'list',
                        id: 'bookmarkView',
                        store: bookmarkStore,
                        itemTpl: itemTpl, // setting the XTemplate here
                        listeners: {
                                itemtap: function(bookmarkView, index, item, e){
                                    console.log("Hello I am Here!");
                                },
                                element: 'innerElement',
                                delegate: 'xplay'
                            }
    What We have tried:
    • We removed element: 'innerElement' and delegate: 'xplay' and it will trigger the itemtap function when we click on ANY part of the XTemplate... but that isn't our goal. We would like only our PLAY button to trigger this listener...
    Any help would be very much appreciated!

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Answers
    20
    Vote Rating
    13
      0  

    Default

    I overrode the "initialize" method of the list and did listen to the tap event for the "play" button. Use the class property instead of the "id" property. Let me know if it works. Good luck!
    Code:
    itemTpl: [
        '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
        '<div>',
        '    <img class="xplay" src="http://www.starrbc.org/play_button.jpg" width="24" height="24"/>',
        '</div>'
    ].join(''),
    
    initialize: function () {
        // Initialize parent.
        this.callParent(arguments);
            
        this.element.on({
            delegate: '.xplay',
            tap: 'handlePlayButton',
            scope: this
        });
    },
    
    // apply to the selection model to maintain visual UI cues
    onItemTrigger: function(me, index, target, record, e) {
            if (!Ext.fly(e.target).hasCls('xplay') && !(this.getPreventSelectionOnDisclose() && Ext.fly(e.target).hasCls(this.getBaseCls() + '-disclosure'))) {
                this.callParent(arguments);
            }
    },
    
    handlePlayButton: function(e){
        var me = this,
        item = e.getTarget().parentNode.parentNode.parentNode, /* It depends on how deep the element is in. I'm not sure the best way to access its parent node.*/
        index = me.container.getViewItems().indexOf(item),
        record = me.getStore().getAt(index);
    
    
        console.log(me,item,index,record);
    },

  3. #3
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Something to be aware of also is you set yourself up for duplicate ids. iSmartDevice has solved this using the class attribute instead of id but it is important to know what you were doing.

    You have an XTemplate like:

    Code:
            var itemTpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
                    '<img src="http://www.myShortenedUrl.com/{timeImgPath}" />',
                    '<div id="xplay">',
                        '<img src="http://www.starrbc.org/play_button.jpg" />',
                    '</div>',
                '</tpl>'
            );
    The <tpl for="."> is telling it you want to loop through an array. If you have 5 objects in the array then you will have 5 sets of images and the div with a child image in it which is fine. The issue is you have an id on that div so if you have 5 objects in an array you are going to have 5 of those divs with the same id which is invalid basic HTML. Changing id to class will solve this.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •