किसी तत्व पर क्लिक ईवेंट जोड़ना?

Question

एक एसटी 2 ऐप में एक मनमाने ढंग से अवधि (उदाहरण के लिए < अवधि आईडी = "foo"> foo </span>) पर एक क्लिक ईवेंट कैसे निर्दिष्ट कर सकता है? मेरे पास एक छोटा सा उदाहरण है जो इस विचार को दर्शाता है कि मैं क्या करना चाहता हूं। उदाहरण में, मैं अक्षर ए, बी, सी लिखता हूं और मैं उपयोगकर्ता को यह बताना चाहता हूं कि उन्होंने किस पत्र पर क्लिक किया था। यहाँ एक छवि है:

कोड:

 
Ext.application({ 

    launch: function() { 
     var view = Ext.create('Ext.Container', { 

      layout: { 
       type: 'vbox' 
      }, 
      items: [ 
       { 
        html: '<span id="let_a">A</span> <span id="let_b">B</span> <span style="float:right" id="let_c">C</span>', 
        style: 'background-color: #c9c9c9;font-size: 48px;', 
        flex: 1 
       } 
      ] 
     }); 
     Ext.Viewport.add(view); 
    } 
}); 

Answer 1

आप एक विशिष्ट तत्व प्रतिनिधिमंडल का उपयोग करने के एक श्रोता जोड़ सकते हैं। यह वास्तव में उपयोग करने के लिए काफी सरल है।

Ext.Viewport.add({ 
    html: 'test <span class="one">one</span> hmmm <span class="two">two</span>', 
    listeners: [ 
     { 
      element: 'element', 
      delegate: 'span.one', 
      event: 'tap', 
      fn: function() { 
       console.log('One!'); 
      } 
     }, 
     { 
      element: 'element', 
      delegate: 'span.two', 
      event: 'tap', 
      fn: function() { 
       console.log('Two!'); 
      } 
     } 
    ] 
}); 

मुख्य भागों element और delegate हैं।

• element, लगभग हर मामले में element का मूल्य है, जब तक आप कस्टम टेम्पलेट के साथ कस्टम घटकों के साथ काम कर रहे हैं होगा।
• delegate एक साधारण सीएसएस चयनकर्ता है। तो यह span .test.second

आदर्श रूप में करने के लिए span से कुछ भी हो सकता है, के रूप में Thiem कहा, तुम संभव के रूप में ज्यादा के रूप में घटकों का लाभ उठाना चाहिए। वे आपको अधिक लचीलापन देंगे। लेकिन मुझे पता है कि निश्चित रूप से कुछ मामले हैं जहां आपको ऐसा करने की ज़रूरत है। कोई प्रदर्शन प्रभाव नहीं होगा; वास्तव में, यह घटकों का उपयोग करने से तेज होगा। हालांकि, आपको कभी श्रोताओं को सुझाए गए तरीके को लागू करना चाहिए। यह प्रदर्शन नहीं करेगा और वह बहुत गंदा है (जैसा कि उसने उल्लेख किया है)।