2012-12-15 71 views
1

我無法將偵聽器添加到從XTemplate生成的不同元素中。在xtemplate中爲不同的div分配監聽器 - extjs 3.4

var data = { 
    users: [ 
     { id: 1, name: 'Ed Spencer' }, 
     { id: 2, name: 'Abe Elias'} 
    ] 
}; 

var store = new Ext.data.JsonStore({  
    autoLoad: true, 
    data : data, 
    root: 'users', 
    fields: [ 
     {name: 'id', type: 'int'}, 
     {name: 'name', type: 'string'} 
    ] 
}); 


var template = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div class="holder">', 
      '<div class="notclicked">foobar</div>', 
      '<div class="name">{name}</div>', 
      '<div class="id">{id}</div>', 
     '</div>', 
    '</tpl>' 
); 



var newPanel = new Ext.Panel({ 

    title: "test", 
    items: new Ext.DataView({ 
     store: store, 
     tpl: template, 
     itemSelector: 'div.holder', 
     emptyText: 'No foo to display' 
    }) 
}); 

newPanel.render('targetDiv'); 

我想要做的是點擊「名稱」div和「ID」div的不同點擊「點擊」偵聽器。但到目前爲止,我只能爲「持有者」分區創建一個「點擊」偵聽器。作爲一個擴展,我想div'notclicked'...不響應點擊。我一直在反駁這一點。任何人都可以給我一個正確的方向?

我使用的是3.4。我已經把上的jsfiddle小提琴:http://jsfiddle.net/tatagatha/7SfCf/6/

回答

1

使用「代理」具有緊縮選擇

http://www.sencha.com/blog/event-delegation-in-sencha-touch

好看起來像3.4沒有活動的代表團呢。 所以你不得不手動檢查哪個節點被點擊: 這裏是你的小提琴選擇工作。 http://jsfiddle.net/dbrin/R29U5/

這正好數據視圖:

 listeners: { 
      click: { 
       fn: this.onClick, 
       scope: this 
      } 
     }, 
     onClick: function(event, item, options) { 
      console.log(arguments); 
      if (item.className === "id") { 
       console.log("Id clicked: " + item.innerHTML); 
       alert("ID clicked: " + item.innerHTML); 
      } 
     } 
+0

我使用ExtJS的3.4。在該博客文章中討論了什麼......我嘗試使用Ext.fly獲取引用並使用Ext.createDelegate()來設置一個簡單的函數,但沒有成功。基於上面的jsFiddle的任何建議將不勝感激。 – Marc

+0

謝謝!我在這個問題上長期以來一直認爲我可以將它們作爲DataView創建中的監聽器的一部分單獨執行。它看起來像使用CSS來製作鼠標「手」,併爲不同div的不同行爲開關語句,我會得到我想要的。 – Marc