كيف يمكنني الحصول على مربع التحرير والسرد extJS ليتصرف مثل مربع تحديد HTML العادي؟

Question

يوفر ExtJS صندوق التحرير والسرد الفاخر يحتوي على الكثير من الميزات-اكتب إلى الأمام ، مما يتيح إدخال نص عشوائي ، وإخفاء جميع الإدخالات في القائمة المنسدلة التي لا تضع دورًا في النص الذي تم إدخاله بالفعل.

لا أريد هذه الميزات. أريد مربعًا محددًا يتصرف تمامًا كما يتوقع المرء أن يتوقع مربع تحديد عادي في الفانيليا HTML.

أريد أن يكون ملزماً بمتجر بيانات ، وأريد جميع الأشياء الجيدة للتكوينات الأخرى التي تأتي مع مربع التحرير والسرد. أنا فقط لا أريد المستخدمين/المختبرين يخيفون عندما يواجهون مربعًا محددًا يكسر النموذج العقلي الحالي لكيفية عمل هذه الأشياء.

فكيف يمكنني الحصول على مربع التحرير والسرد extjs ليتصرف أكثر مثل مربع تحديد؟ أم أنا أستخدم عنصر واجهة مستخدم خاطئ تمامًا؟

Answer 1

يمكنك الحصول على هذا السلوك فقط باستخدام التكوين المناسب عند إنشاء كائن 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' و store الوسيطة في قضيتك إذا كنت ترغب في أن تكون ملزمًا بـ Ext.data.JsonStore علي سبيل المثال.

Answer 2

يعمل الحل المقبول حاليًا بشكل رائع ، ولكن إذا كان أي شخص يريد combobox يتولى أيضًا إدخال لوحة المفاتيح مثل مربع تحديد HTML عادي (على سبيل المثال ، في كل مرة تضغط فيها "P" ، يحدد العنصر التالي في القائمة بدءًا من "P") ، قد يكون ما يلي مفيدًا:

{
    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));
            }
        }
    }
}

Answer 3

هل جربت typeAhead = false؟ لست متأكدًا مما إذا كان هذا قريبًا مما تريد.

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

    ...

});

Answer 4

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

Answer 5

فقط استخدم Ext.merge وظيفة

من المستند: http://docs.sencha.com/extjs/4.2.1/# !/api/ext-method-merge