सेन्चा टच चयन क्षेत्र में पॉपुलटिंग आइकन

Question

मुझे एक बहुत ही साधारण समस्या मिली है जिसका समाधान बिल्कुल आसान नहीं है।
मैं selectfield के प्रत्येक विकल्प के सामने छवियां जोड़ना चाहता हूं। अधिक सटीक होने के लिए, मैं छवियों को picker में ट्रिगर्स और चुनिंदा फ़ील्ड के वर्तमान मान में जोड़ना चाहता हूं।
सादगी के लिए, मैं एक छोटे से उदाहरण बना देंगे:

मान लें, आप एक उपयोगकर्ता चार खेल कार्ड सूट हीरे, दिल, हुकुम और क्लब में से एक के बीच चयन करना चाहते हैं। दृश्य पहचान के समर्थन के लिए, आप प्रत्येक सूट नाम करने के लिए इसी प्रतीक पहले जोड़ें करना चाहते हैं, तो यह कुछ इस तरह दिखाई दे सकता है:

एक Sencha स्पर्श घटक के मेरी पहली पसंद, कि विकल्पों में से एक सेट से चयन सक्षम स्वाभाविक रूप से selectfield था। दुर्भाग्यवश, यह केवल शुद्ध पाठ प्रदर्शित करने में सक्षम है, और कुछ भी नहीं। सेन्चा टच स्रोतों में खुदाई करने के बाद, मैं अंत में आधे समाधान के साथ आया। असल में, मैं selectfield एक कस्टम defaultPhonePickerConfig पास करता हूं, जिसमें संबंधित picker (जिसे विकल्प प्रदर्शित करने के लिए selectfield द्वारा उपयोग किया जाता है) को कस्टम itemTpl असाइन किया जाता है। itemTpl आराम करता है, अर्थात् छवि प्रदर्शित करने कुछ html जोड़ने:

defaultPhonePickerConfig: { 
    listeners: { 
     initialize: function() { 
      var slots = this.query('pickerslot'); 
      Ext.each(slots, function(slot) { 
       slot.setItemTpl('<img src="someImage.jpg"> {text}'); 
      }); 

     }, 

     change: function() { 
      // reconstruct the selectfield's change handler, 
      // since it gets overwritten 
      var iconSelect = Ext.Viewport.query('#IconSelect')[0]; 
      iconSelect.onPickerChange.apply(iconSelect, arguments); 
     } 
    } 
} 

इस समाधान के लिए एक काम कर बेलाhere पाया जा सकता है।

मेरे समाधान है कि बुरा नहीं है, लेकिन वहाँ एक मामूली cosmetical समस्या है, यह सिर्फ मेरे लिए स्वीकार्य नहीं है: माउस केवल picker (ऊपर स्क्रीनशॉट के निचले हिस्से) में प्रदर्शित किए जाते हैं, लेकिन नहींselectfield ही (ऊपरी, ग्रेड आउट भाग) जब विकल्प चुना गया था। और चुनिंदा क्षेत्र के वर्तमान मूल्य में आइकन जोड़ने का कोई अच्छा तरीका नहीं लगता है।

और यह मेरे प्रश्न का मुख्य विषय है: पर दोनों को जोड़ने के लिए क्या अच्छा तरीका है पिकर के विकल्प और सेलेकफील्ड के वर्तमान मूल्य पर भी? क्या मुझे शायद अपने मौजूदा समाधान में अपेक्षाकृत कम कोड जोड़ना है या क्या मुझे पूरा नोटर दृष्टिकोण लेना चाहिए?
प्रत्येक योगदान की सराहना की जाती है। धन्यवाद!

अद्यतन:
आसपास हैकिंग कुछ के बाद, मैं एक तरह से (एक बदसूरत एक) selectfield खुद के लिए एक आइकन पहले जोड़ें करने के लिए मिला। यह ज्यादातर क्रूर एचटीएमएल डोम मैनिपुलेशन पर आधारित है: अब मैं selectfield के लिए ईवेंट हैंडलर को भी परिभाषित करता हूं (change और painted)। प्रारंभिकरण पर और जब भी मूल्य बदल जाता है, तो मेरे हैंडलर अंतर्निहित <input> के लिए उत्पन्न डीओएम खोजते हैं और इसके साथ गड़बड़ करते हैं। (वह बुरे लड़का शायद यही कारण है कि हम HTML को पहले स्थान पर असाइन नहीं कर सकते हैं, क्योंकि ढांचे में value विशेषता बदलती है। और value दूसरी तरफ केवल सादा पाठ हो सकता है।)
यह वह जगह है मैं कैसे परिभाषित selectfield के listeners:

prependIconToSelectfield: function (optValue, domElement) { 
    var iconUrl = this.getIconUrl(optValue); 
    domElement.style.backgroundImage = 'url(' + iconUrl + ')'; 
    domElement.style.backgroundSize = '20px 20px'; 
    domElement.style.backgroundRepeat = 'no-repeat'; 
    domElement.style.backgroundPosition = 'left center'; 
    domElement.style.paddingLeft = '30px'; 
} 

चेक बाहर this fiddle एक काम उदाहरण के लिए:

listeners: { 
     change: function() { 
      var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]'); 
      PickerIcons.app.prependIconToSelectfield(arguments[1], pickerDOM); 
     }, 
     painted: function() { 
      // Initialize an icon on creation 
      var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]'); 
      PickerIcons.app.prependIconToSelectfield(this.getValue(), pickerDOM); 
     } 
} 

इसी समारोह prependIconToSelectfield() सिर्फ कुछ सीएसएस परिभाषित करता है।

यह अभी भी मेरे लिए कोई अच्छा समाधान नहीं है, क्योंकि इस तरह के हैकिश करने के बाद डोम मैनिपुलेशन मेरे स्वाद के लिए नकली है। मुझे नहीं पता कि डोम में सक्रिय रूप से गड़बड़ करने के दुष्प्रभाव क्या बड़ी परियोजनाओं में हो सकते हैं, और इसे कठिन तरीके से नहीं सीखना चाहते हैं। तो, मैं अभी भी एक क्लीनर समाधान की तलाश में हूं।

Answer 1

इतनी मेहनत सेन्चा स्पर्श पर काम करने के पहले कुडोस जब आप बॉक्स से कुछ करने का प्रयास करते हैं तो हस्तक्षेप करना बेहद मुश्किल होता है। ऐसा कहने के बाद कि मुझे & को जो भी आप चाहते हैं उसके लिए समाधान का प्रस्ताव दें। सेन्चा में एक चयन क्षेत्र में निम्न डोम टैग संरचना है।

div.x-field-select 
    div.x-field-input 
     input.x-input-el 
     div.x-clear-icon 
     div.x-field-mask 

अब x-clear-icon पर ध्यान केंद्रित करें, यह आमतौर पर छिपी हुई है क्योंकि एक चयन क्षेत्र को स्पष्ट बटन की आवश्यकता नहीं होती है। इसे दिखाने के लिए सबसे पहले एक सीएसएस वर्ग लिखें (प्रदर्शन: ब्लॉक)। यह टेक्स्ट फ़ील्ड & के समान एक्स बटन के साथ प्रदर्शित करेगा, इसे दाएं कोने की ओर रखा जाएगा। आप सीएसएस की स्थिति को बाईं ओर और चुनिंदा क्षेत्र में बदल सकते हैं, आप अपनी पृष्ठभूमि को अपनी इच्छित चीज़ों में बदल सकते हैं। यह बहुत सीधी समाधान नहीं है लेकिन मैंने इसे एक ही समस्या के लिए कोशिश की है & यह काम करता है। आपने जो किया है उससे निर्णय लेना मुझे लगता है कि आप इसे कर सकते हैं। शुभकामनाएं। आशा है कि मेरा समाधान मदद करता है।