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




extjs4 (2)

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

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

मेरे पास एक 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/


कृपया इस लिंक को देखें कैसे 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();
                }
            }
        }
    }
});