चेकबॉक्स के साथ ExtJs 4 combobox

मैं EXTJS4 combobox नियंत्रण की तलाश में हूं जो अंदरूनी चेकबॉक्स के माध्यम से एकाधिक आइटम चुनने की अनुमति देता है।चेकबॉक्स के साथ ExtJs 4 combobox

असल में मुझे इस नियंत्रण http://lovcombo.extjs.eu/ की आवश्यकता है लेकिन यह ExtJs3 के लिए लागू किया गया है। मैंने इसे ExtJs4 में बदलने की कोशिश की लेकिन यह कार्य वास्तव में छोटा नहीं है।

क्या आप ExtJs4 के लिए समान घटक सुझा सकते हैं। या शायद आप मुझे कुछ ट्यूटोरियल या उदाहरण के लिए इंगित कर सकते हैं - ऐसी चीजें कैसे करें?

स्रोत

2011-07-06 Andrey Selitsky

उपयोग करें: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox

enter image description here

या इस: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

- combox

में checkboxselectmodel के साथ प्रयोग के लिए ग्रिड

स्रोत

2011-07-07 06:47:35 atian25

मैं इस घटक देखा [नीचे इस कस्टम घटक की एक छवि है], और मुझे लगता है कि यह बहुत अच्छा है। लेकिन मुझे चेकबॉक्स के साथ बिल्कुल combobox की जरूरत है। यह एक आवश्यकता है। फिर भी धन्यवाद। –

दूसरे तरीके से प्रयास करें। या एक पल के लिए प्रतीक्षा करें, कोई भी lovcombo को 4.x पर ले जाने के लिए होगा :) – atian25

चेकबो के साथ बहुविकल्पीय कॉम्बो एक्सजेजेएस 4.0 में एक्स कोड के कुछ लाइनों के साथ हासिल किया जा सकता है।

असल में आपको मौजूदा सीएसएस वर्ग का उपयोग करने की आवश्यकता है जो किसी आइटम के चयन और चयन के दौरान लागू होती है और उस समय एक छवि (चेकबॉक्स छवि) को दबाती है।

"एक्स boundlist-आइटम" और "एक्स boundlist चयनित" ext-all.css से लिया वर्ग हैं।

<style>

.x-boundlist-item img.chkCombo { 
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif); 
} 
.x-boundlist-selected img.chkCombo{ 
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif); 
}

</style> 
<head>

Ext.create('Ext.form.ComboBox', { 
     id: 'BCCAddress', 
     name: 'BCCAddress', 
     maxHeight: 150,   
     width: 210, 
     multiSelect: true, 
     emptyText : "Select Bcc email addresses", 
     renderTo: 'extBCCAddress', 
     store: myArrayStore, 
     displayField: 'fieldName', 
     valueField: 'fieldName', 
     forceSelection: true, 
     editable: false, 
     mode: 'local', 
     triggerAction: 'all', 
     listConfig : {   
      getInnerTpl : function() { 
       return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>'; 
      } 
     } 
    });

enter image description here

स्रोत

2012-07-06 15:31:52

मैं v4.2.1.883 का उपयोग कर रहा हूं (यह सुनिश्चित नहीं है कि यह महत्वपूर्ण है) लेकिन ऊपर कोड तब तक काम नहीं करता जब तक कि मैंने ऊंचाई और चौड़ाई नहीं जोड़ा उपरोक्त प्रत्येक शैलियों में 16px का। मैंने छवि को मेरी/छवि निर्देशिका में भी स्थानांतरित कर दिया (सुनिश्चित नहीं है कि वह mattered है)। मैं वास्तव में सोच रहा हूं कि ऐसा करने का एक बेहतर तरीका क्या होगा ताकि आपको extjs संसाधन पथ के लिए हार्ड कोड संदर्भ न हो? –

ExtJS 4.2.1 (और अन्य संस्करणों में) में, आपको संसाधन पथ को हार्ड कोड करने की आवश्यकता नहीं है। इसके बजाय, शैलियों को एक एससीएसएस फ़ाइल (उदा। Sass/etc/all.scss) पर रखें और "पृष्ठभूमि: पारदर्शी यूआरएल (छवियों/मेनू/check.gif) का उपयोग करें;"। ऐसा लगता है कि 4.2.1 में, हमें स्पष्ट रूप से 16px की चौड़ाई और ऊंचाई देना होगा जैसा कि पीटर ने उल्लेख किया था। –

@ पीटर केलर कहते हैं, आपको अपनी शैली में 16px की ऊंचाई और चौड़ाई जोड़नी है। यह मुझ पर एक्स्टेज 4.2.2 पर काम किया जाता है। –

चेकबॉक्स के साथ ExtJs 4 combobox

उत्तर

संबंधित मुद्दे