煎茶觸摸2參照的HTML事件

我有一些HTML在我的面板：煎茶觸摸2參照的HTML事件

styleHtmlContent: true, 
scrollable: true, 

items: { 
    docked: 'top', 
    xtype: 'titlebar', 
    title: 'List' 
     }, 
    html: [ 
     "<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>", 
     "Text</div>" 
    ].join("")

而且在我的控制器

config: { 
    refs: { 
     abutton: '.abutton', 
     abuttonbyid:'#abuttonbyid' 
    }, 

    control: { 
     abutton: { 
      tap: 'onButtonTap' 
     }, 
     abuttonbyid : { 
      tap: 'onButtonTap' 
     } 
    }, 
}, 

onButtonTap: function() { 
    console.log("Tapped"); 
}

我想它所以當DIV按鈕被竊聽，我在我的js控制檯/網絡檢查器中獲取Tapped。我做了兩個類和一個ID與一個元素，因爲我想附加事件監聽器到許多div按鈕，而不是一個。許多div按鈕，一個事件。

我需要使用html按鈕而不是Sencha按鈕。

來源

2013-02-07 Akshat

爲什麼不只是添加一個按鈕到你的標題欄？

items: { 
    docked: 'top', 
    xtype: 'titlebar', 
    title: 'List', 
    items: [ 
    { 
     xtype: 'button', 
     text: 'Tap Me', 
     handler: function() { console.log("button tap"); } 
    } 
    ] 
}

編輯：既然你說你要使用的HTML（這是不優選），那麼你可以添加委託給你的DOM節點的自定義監聽器：

items: { 
    docked: 'top', 
    xtype: 'titlebar', 
    title: 'List', 
    html: [ 
    "<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>", 
    "Text</div>" 
    ].join(""), 

    // The new "listeners" code... 
    listeners: { 
    tap: { 
     fn: function(event, el){ console.log("tapped!"); }, 
     element: 'element', 
     delegate: '#abuttonbyid' 
    } 
    } 
}

僅供參考，我會請看event delegation上的這個文檔。

來源

2013-02-07 17:31:09 jakerella

我有太多的項目使用按鈕。我使用div的原因是它們的剪切量。我想創建一個委託給控制器，但我似乎無法做到這一點 – Akshat

那麼，Sencha人建議儘可能使用組件，並且裁判使用'ComponentQuery'來查找事情，所以你的CSS語法將不起作用。也就是說，你可以使用'Ext.DomQuery'獲取DOM節點並附加你自己的監聽器。我會添加一個單獨的答案供您查看。 – jakerella

其實，找到一個更好的方式來與聽衆一起做...嘗試一下。 – jakerella

煎茶觸摸2參照的HTML事件

回答

相關問題