extjs - एक्स्टजेएस कॉम्बो बॉक्स:उपयोगकर्ता को कोई मान नहीं चुनने की अनुमति दें(रिक्त)




extjs4 (3)

मेरे पास एक Ext ComboBox है जहां उपयोगकर्ता को कोई मूल्य चुनने में सक्षम नहीं होना चाहिए। ExtJS समर्थन नहीं करता है कि बॉक्स से बाहर।

मैंने क्या प्रयास किया है:

दूसरे ट्रिगर का उपयोग करें जो मूल्य को साफ़ करता है

काम करता है लेकिन बहुत उपयोगी नहीं है मुझे एक बेहतर समाधान चाहिए

स्टोर करने के लिए "नकली" अशक्त आइटम जोड़ें:

हालांकि यह काम करता है, लेकिन मुझे इसके लिए मॉडल को संशोधित करना होगा, ताकि आईडी के लिए शून्य मान की अनुमति मिल सके। और यह एक हैक की तरह दिखता है।

सेट कस्टम टीएलएल जैसे

'<ul class="x-list-plain">',
  '<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
  '<tpl for=".">',
    '<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>',
  '</tpl>',
'</ul>'

लेकिन अब यह वास्तव में मुश्किल हो रहा है, अब यह विचार कैसे ठीक से काम करना है।

jsfiddle:

http://jsfiddle.net/q5e3J/1/

कस्टम tpl के साथ: http://jsfiddle.net/q5e3j/2/


Answers

आप कॉम्बो कॉन्फ़िग पर "परिवर्तन" श्रोता का उपयोग कर सकते हैं और शून्य मानों की जांच कर सकते हैं:

change: function() {
  if (this.getValue() === null) {
    // Set default Value here
  }
};

कृपया इस लिंक को देखें कैसे ExtJS कॉम्बोबॉक्स को खाली आइटम जोड़ने के लिए?

अद्यतन: उस समाधान के साथ जेएसफाल्ड लागू किया गया: http://jsfiddle.net/q5e3j/3/

var combo = Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    displayField: 'name',
    valueField: 'abbr',
    value: 'AL',
    store: Ext.create('Ext.data.Store', {
        model: 'State',
        data: states
    }),
    queryMode: 'local',
    editable: false,
    emptyText: 'No Selection',
    listConfig: {
        tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
            + '<tpl for=".">'
            + '<div class="x-boundlist-item">{name}</div></tpl>',
        listeners: {
            el: {
                delegate: '.my-boundlist-item-menu',
                click: function() {
                    combo.clearValue();
                }
            }
        }
    }
});

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

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
    }
]

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

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

एक अन्य चीज नई सूची-आइटम टेम्पलेट बनाना है उदाहरण के लिए:

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>';
    }
}

और आखिरी चीज - आपको यह सुनिश्चित करना होगा कि मूल्य को डिव में ठीक से सेट किया गया है। इसके लिए आपको setRawValue विधि को ओवरराइड करना चाहिए:

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 फ़ील्ड नहीं है, इसलिए मान सबमिट नहीं किया जाएगा। यदि आपको फॉर्म के साथ इस कॉम्बो का उपयोग करने की आवश्यकता है, तो आपको fieldSubTpl में कहीं छुपा इनपुट जोड़ना चाहिए और fieldSubTpl में fieldSubTpl लिए मान निर्धारित करना चाहिए।

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