title: Delegating Listeners to an ID in XTemplate (ExtJS)
body: <p>I am working with Listeners + XTemplate.</p>
  
  <p>Our goal is to delegate an 'itemtap' listener to an ID in XTemplate (i.e. div id="xplay").</p>
  
  <p>Error received:</p>
  
  <pre><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
  </code></pre>
  
  <p>Here's our XTemplate:</p>
  
  <pre><code>var itemTpl = new Ext.XTemplate(
      '&lt;tpl for="."&gt;',
          '&lt;img src="http://www.myShortenedUrl.com/{taskImgPath}" /&gt;',
          '&lt;img src="http://www.myShortenedUrl.com/{timeImgPath}" /&gt;',
          '&lt;div id="xplay"&gt;',
              '&lt;img src="http://www.starrbc.org/play_button.jpg" /&gt;',
          '&lt;/div&gt;',
      '&lt;/tpl&gt;'
  );
  </code></pre>
  
  <p>Here's our xtype: list with the XTemplate (<em>itemTpl</em>) binded to it, and an itemtap listener that is delegated to "xplay":</p>
  
  <pre><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'
      }
  </code></pre>
  
  <p>We removed <code>element: 'innerElement'</code> and <code>delegate: 'xplay'</code> and it will trigger the <code>itemtap</code> 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.</p>
  
  <h2>Update</h2>
  
  <p>Thanks Evan for the quick response.</p>
  
  <p>Here's what I tried with your inputs - let me know if I'm doing it wrongly.</p>
  
  <p>Changed div id to div class.</p>
  
  <pre><code>var itemTpl = new Ext.XTemplate(
      '&lt;tpl for="."&gt;',
          '&lt;img src="http://www.myShortenedUrl.com/{taskImgPath}" /&gt;',
          '&lt;div class="xplay"&gt;',
              '&lt;img src="http://src.sencha.io/200/http://www.starrbc.org/play_button.jpg" /&gt;',
          '&lt;/div&gt;&lt;br/&gt;',
      '&lt;/tpl&gt;'
  );
  </code></pre>
  
  <p>I added the check for the event object, commented the codes away for element and delegate (leaving these there won't work).</p>
  
  <pre><code>listeners: {
      itemtap: function(bookmarkView, index, item, e) {
                  console.log("Hello I am Here!");
  
                  if (e.getTarget().hasCls('xplay')) {
                      console.log('hasCls: xplay');
                  }
              } //,
      // element: 'innerElement',
      // delegate: 'xplay'
  }
  </code></pre>
  
  <p>However, we encountered this problem:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Object [object Object] has no method 'getTarget'
    Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception
    1 undefined</p>
  </blockquote>
  
  <p>We're confused, does that mean we're not getting an Event object? Or have we interpreted your explanation wrongly?</p>