EXTJS 4 एक combobox

Question

में किसी चयनित मान का HTML प्रस्तुत करें हैलो मुझे अगली समस्या है, मैं अपने डिस्प्ले वैल्यू के एचटीएमएल को एक कम्बोबॉक्स में प्रस्तुत करना चाहता हूं, फिलहाल मैं एचटीएमएल तैयार के साथ स्टोर लोड करता हूं, यह प्रस्तुत करता है एचटीएमएल जब मैं उन सभी को दिखाता हूं, लेकिन जब मैं एक चुनता हूं, तो यह एचटीएमएल दिखाता है।

जब आइटम पहले से ही चुना गया है तो HTML को प्रस्तुत करने के लिए मैं क्या कर सकता हूं?

यहाँ असुविधाजनक व्याख्या करने के लिए मदद करने के लिए कुछ छवियों हैं:

यह जब मैं एक

http://i.stack.imgur.com/TcfRA.jpg

चयन करने के लिए यह जब मैं चयन है जा रहा है एक

http://i.stack.imgur.com/Kzi9r.jpg

एचटीएमएल कि मैं प्रतिपादन कर रहा हूँ अगले एक है:

<img class="io_img" src="/files/images/io-P.gif"/><div class="io_desc">hola</div></div> 

अग्रिम धन्यवाद।

पीडी: छवियों को दिखाने के लिए खेद है, और केवल लिंक, लेकिन मेरे पास छवियों को सीधे दिखाने के लिए पर्याप्त प्रतिष्ठा नहीं है।

Answer 1

इसके लिए कुछ चरणों की आवश्यकता है। समस्या यह है कि ComboBox के नीचे इनपुट क्षेत्र है, और इनपुट HTML प्रदर्शित नहीं कर सकते हैं। तो पहला कदम टेम्पलेट को बदलना है जो div के साथ इनपुट को प्रतिस्थापित करता है। उदाहरण के लिए:

displayTpl: Ext.create('Ext.XTemplate', [ 
    '<tpl for=".">', 
    '<img src="http://phpbb3.pl/adm/images/icon_edit.gif" />', 
    '{[typeof values === "string" ? values : values["title"]]}', 
    '</tpl>' 
]) 

एक और बात नई सूची आइटम टेम्पलेट बनाने के लिए है:

fieldSubTpl: [ 
    '<div class="{hiddenDataCls}" role="presentation"></div>', 
    '<div id="{id}" type="{type}" ', 
     '<tpl if="size">size="{size}" </tpl>', 
     '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
     'class="{fieldCls} {typeCls}" autocomplete="off"></div>', 
    '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">', 
     '{triggerEl}', 
     '<div class="{clearCls}" role="presentation"></div>', 
    '</div>', 
    { 
     compiled: true, 
     disableFormats: true 
    } 
] 

फिर टेम्पलेट जो मान चयनित पता चलता है बदल जाते हैं। उदाहरण:

listConfig: { 
    getInnerTpl: function() { 
     return '<div class="search-item">' + 
      '<h3><img src="http://phpbb3.pl/adm/images/icon_edit.gif" /><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' + 
      '{excerpt}' + 
     '</div>'; 
    } 
} 

और आखिरी बात - आपको यह सुनिश्चित करना होगा कि मूल्य सही ढंग से div में सेट हो। ,

setRawValue: function(value) { 
    var me = this; 
    value = Ext.value(value, ''); 
    me.rawValue = value; 

    // Some Field subclasses may not render an inputEl 
    if (me.inputEl) { 
     // me.inputEl.dom.value = value; 
     // use innerHTML 
     me.inputEl.dom.innerHTML = value; 
    } 
    return value; 
} 

सूचना कि नया टेम्प्लेट किसी भी input क्षेत्र शामिल नहीं है इसलिए मूल्य सबमिट नहीं किया जाएगा: उसके लिए आपको setRawValue विधि ओवरराइड करना चाहिए। यदि आपको फॉर्म के साथ इस तरह के कॉम्बो का उपयोग करने की आवश्यकता है, तो आपको कहीं भी fieldSubTpl में छुपा इनपुट जोड़ना चाहिए और इसके लिए setRawValue में मान सेट करना चाहिए।

कार्य नमूना: http://jsfiddle.net/lolo/8Xs5h/1/

Answer 2

हमारे पास चयनित रंग प्रदर्शित करने के लिए समान कार्य है। हमारे समाधान बता गया टेम्पलेट के अधिभावी है:

var store = new Ext.data.SimpleStore({ 
    fields: ['num','id', 'color'] 
}); 

var tplColor = new Ext.XTemplate(
    '<tpl for="."><div id = "seriesColor_{num}" class="combo-result-item">', 
     '<div class="combo-texture" style="background-color:{color};">&nbsp;</div>', 
    '</div></tpl>' 
); 

new Ext.form.ComboBox({ 
    tpl: tplColor, 
    store: store, 
    ... 
}; 

आप कुछ इसी तरह है, लेकिन पृष्ठभूमि रंग के बजाय छवि का उपयोग करें।