मैं एक सामान्य, एचटीएमएल चयन बॉक्स की तरह कार्य करने के लिए एक extjs कॉम्बो बॉक्स कैसे प्राप्त करूं?




extjs3 (4)

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

मुझे ये सुविधाएं नहीं चाहिए। मैं एक चुनिंदा बॉक्स चाहता हूं जो बिल्कुल वैसे ही व्यवहार करता है जैसे कि एक सामान्य चयन बॉक्स वेनिला एचटीएमएल में होगा।

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

तो मैं एक चयन बॉक्स की तरह अधिक कार्य करने के लिए एक extjs कॉम्बो बॉक्स कैसे प्राप्त कर सकते हैं? या मैं गलत विजेट का उपयोग कर रहा हूँ?


क्या आपने typeAhead = false कोशिश की? यह भी सुनिश्चित नहीं है कि यह आपके इच्छित चीज़ों के करीब है या नहीं।

var combo = new Ext.form.ComboBox({
    typeAhead: false,

    ...

});

जब आप Ext.form.ComboBox ऑब्जेक्ट को तुरंत चालू करते हैं तो आप उचित कॉन्फ़िगरेशन का उपयोग कर उस व्यवहार को प्राप्त कर सकते हैं:

var selectStyleComboboxConfig = {
    fieldLabel: 'My Dropdown',
    name: 'type',
    allowBlank: false,
    editable: false,
    // This is the option required for "select"-style behaviour
    triggerAction: 'all',
    typeAhead: false,
    mode: 'local',
    width: 120,
    listWidth: 120,
    hiddenName: 'my_dropdown',
    store: [
        ['val1', 'First Value'],
        ['val2', 'Second Value']
    ],
    readOnly: true
};
var comboBox = new Ext.form.ComboBox(selectStyleComboboxConfig); 

mode: 'local' बदलें mode: 'local' और अपने मामले में store तर्क अगर आप इसे Ext.data.JsonStore से बाध्य करना चाहते हैं उदाहरण के लिए।


वर्तमान में स्वीकार्य समाधान बहुत अच्छा काम करता है, लेकिन अगर कोई कॉम्बोबॉक्स चाहता है जो एक सादे HTML चयन बॉक्स जैसे कीबोर्ड इनपुट को भी संभालता है (उदाहरण के लिए, प्रत्येक बार जब आप "पी" दबाते हैं तो "पी" से शुरू होने वाली सूची में अगला आइटम चुनता है) निम्नलिखित सहायक हो सकता है:

{
    xtype: 'combo',
    fieldLabel: 'Price',
    name: 'price',
    hiddenName: 'my_dropdown',
    autoSelect: false,
    allowBlank: false,
    editable: false,
    triggerAction: 'all',
    typeAhead: true,
    width:120,
    listWidth: 120,
    enableKeyEvents: true,
    mode: 'local',
    store: [
        ['val1', 'Appaloosa'],
        ['val2', 'Arabian'],
        ['val3', 'Clydesdale'],
        ['val4', 'Paint'],
        ['val5', 'Palamino'],
        ['val6', 'Quarterhorse'],
    ],
    listeners: {
        keypress: function(comboBoxObj, keyEventObj) {
            // Ext.Store names anonymous fields (like in array above) "field1", "field2", etc.
            var valueFieldName = "field1";
            var displayFieldName = "field2";

            // Which drop-down item is already selected (if any)?
            var selectedIndices = this.view.getSelectedIndexes();
            var currentSelectedIndex = (selectedIndices.length > 0) ? selectedIndices[0] : null;

            // Prepare the search criteria we'll use to query the data store
            var typedChar = String.fromCharCode(keyEventObj.getCharCode());
            var startIndex = (currentSelectedIndex == null) ? 0 : ++currentSelectedIndex;

            var matchIndex = this.store.find(displayFieldName, typedChar, startIndex, false);

            if( matchIndex >= 0 ) {
                this.select(matchIndex);
            } else if (matchIndex == -1 && startIndex > 0) {
                // If nothing matched but we didn't start the search at the beginning of the list
                // (because the user already had somethign selected), search again from beginning.
                matchIndex = this.store.find(displayFieldName, typedChar, 0, false);                                
                if( matchIndex >= 0 ) {
                    this.select(matchIndex);
                }
            }

            if( matchIndex >= 0 ) {
                var record = this.store.getAt(matchIndex);
                this.setValue(record.get(valueFieldName));
            }
        }
    }
}

var buf = []; 
buf.push('<option>aA1</option>');
buf.push('<option>aA2</option>');
buf.push('<option>bA3</option>');
buf.push('<option>cA4</option>');

var items = buf.join('');
new Ext.Component({
    renderTo: Ext.getBody(),
    autoEl: {
         tag:'select',
         cls:'x-font-select',
         html: items
    }
 });