ExtJS 2.x / 3.x में हाइपरलिंक। युवा सेनानी की मदद करना

यह पोस्ट "मिस्ट्रेस ऑन ए नोट" श्रेणी से एक छोटा और मामूली है।
जब मैंने पहली बार एक्सटीजेएस से परिचित होना शुरू किया, तो यह मेरे लिए थोड़ा जंगली था कि इतने बड़े वेब विकास ढांचे में उपयोगकर्ता इंटरफ़ेस में हाइपरलिंक्स का उपयोग करने के लिए कोई साधन नहीं है (कम से कम बटन, पैनल और अन्य अधिक जटिल नियंत्रणों के साथ, जहां लागू किया जा सकता है) जो कुछ भी)। जैसा कि अक्सर होता है, ढांचा, जो जटिल चीजों के लिए एक सरल तरीका प्रदान करता है, उन जगहों पर कठिनाइयों का निर्माण करता है जहां आप उनसे उम्मीद नहीं करते हैं।

बेशक, Ext.Element (डोम तत्वों के चारों ओर क्रॉस-ब्राउज़र आवरण) का उपयोग करके, आप रनटाइम में किसी भी HTML टुकड़े को इंजेक्ट कर सकते हैं, लेकिन लचीलापन और आसानी जिसके साथ अन्य नियंत्रण सम्मिलित किए जा सकते हैं, उदाहरण के लिए, टूलबार, पैनल या अन्य कंटेनर में, प्राप्त किया जाएगा। मुश्किल।

और हाल ही में, एक आवेदन के प्रोटोटाइप पर काम करते समय, मैंने "गलती से" ऐसा एक घटक लिखा था। यह बहुत सरल है, लेकिन, यह मुझे लगता है, कई लोग जीवन को आसान बना सकते हैं।

नीचे इसका कोड और एक संक्षिप्त विश्लेषण है।

Custom.Hyperlink = Ext.extend(Ext.BoxComponent, { constructor: function (config) { config = config || {}; Ext.apply(this, config); Custom.Hyperlink.superclass.constructor.call(this, config); this.on('afterrender', this.createHref, this); this.addEvents('clicked'); }, hrefTpl: '<a href="#" onclick="Ext.getCmp(\'{0}\').notifyClicked(); return false;">{1}</a>', createHref: function () { var tpl = new Ext.Template(this.hrefTpl), html = tpl.apply([this.getId(), this.text]); this.el.update(html); }, notifyClicked: function () { this.fireEvent('clicked', this); } } ); Ext.reg('hyperlink', Custom.Hyperlink); 

इस तरह के हाइपरलिंक को किसी अन्य मानक घटक की तरह ही कंटेनर में जोड़ा जाता है; पर्यावरण के साथ बातचीत सामान्य घटना-उन्मुख शैली में होती है।
लिंक पूर्वनिर्धारित डोम आईडी से बंधा नहीं है, लेकिन यह इस बात की गारंटी है कि लिंक के ऑन्कलिक में कहा गया तरीका सही घटक की ओर से बुलाया जाएगा (जैसा कि आप जानते हैं, जब विधि विधि को A.ethethod () के रूप में कहते हैं, तो यह विधि के अंदर की गारंटी है) बिंदु A)
निम्नलिखित इस तरह के एक घटक का उपयोग करने का एक उदाहरण है।

 Custom.SearchPanel = Ext.extend(Ext.Panel, { initComponent: function () { Ext.apply(this, { … //skipped tbar: [{ xtype: 'hyperlink', text: 'Show advanced', listeners: { scope: this, clicked: this.showAdvancedForm } } ] } ); Custom.SearchPanel.superclass.initComponent.call(this); }, showAdvancedForm: function () { Ext.Msg.alert('Clicked!'); } } ); 

आदर्श रूप से, हाइपरलिंक के लिए, आपको टेक्स्ट प्रॉपर्टी सेट करते समय HTML-असुरक्षित वर्णों के भागने को सक्षम / अक्षम करना चाहिए। यह मानक Ext.util.Format.htmlEncode () फ़ंक्शन का उपयोग करके तुच्छ रूप से किया जाता है। मैं एक छोटे से व्यायाम के रूप में पाठक को इस सुधार की पेशकश करता हूं।