Live Combo Box не работает ExtJS 4.2.1

Question

Я не уверен, что случилось с моим кодом. Однако после того, как я напечатаю 4 символа в поле со списком, все значения будут отображаться, а не фильтроваться на основе символов, которые я набрал. Из-за этого мой живой поиск нарушен. Пожалуйста, см. Прикрепленное изображение для лучшей иллюстрации.

Я создаю выпадающий внутри панели в качестве одного пункта

{ 
     xtype: 'combobox', 
     fieldLabel: 'Guest Name', 
     padding: '10px 10px 20px 10px', 
     allowBlank: false, 
     id: 'guest_id_payment', 
     name: 'guest_id', 
     // Template for the dropdown menu. 
     // Note the use of "x-boundlist-item" class, 
     // this is required to make the items selectable. 
     tpl: Ext.create('Ext.XTemplate', 
      '<tpl for=".">', 
       '<div class="x-boundlist-item">{identity_number} - {name}</div>', 
      '</tpl>' 
     ), 
     // template for the content inside text field 
     displayTpl: Ext.create('Ext.XTemplate', 
      '<tpl for=".">', 
       '{identity_number} - {name}', 
      '</tpl>' 
     ), 
     valueField: 'identity_number', 
     store: 'SGuest', 
     height: 20, 
     queryMode: 'remote' 
    } 

Это магазин:

Ext.define('ghb.store.SGuest', { 
extend: 'Ext.data.Store', 
model: 'ghb.model.MGuest', 
autoLoad: true, 
autoSync: true, 

proxy: { 
    pageParam: false, 
    startParam: false, 
    limitParam: false, 

    type: 'ajax', 
    api: { 
     create: '/ghb_manager/add_guest', 
     read: '/ghb_manager/data_guest', 
     update: '/ghb_manager/edit_guest', 
     destroy: '/ghb_manager/delete_guest' 
    }, 
    reader: { 
     type: 'json', 
     root: 'data' 
    }, 
    writer: { 
     type: 'json', 
     encode: true, 
     writeAllFields: true, 
     root: 'data' 
    }, 
    root: 'data' 
} 
}); 

Я также добавить изменение событие слушателем

 '#guest_id_payment':{ 
      change: this.changeGuestCombo 
     }, 

Это функция слушателя событий изменения, загрузка другого магазина (а не магазин ComboBox)

changeGuestCombo: function(self, newValue, oldValue, eOpts){ 
    var store = Ext.getStore('SReservation'); 
    store.load({ 
     params: { 
      data: self.getValue(), 
     } 
    }); 
}, 

N.B. Я использую 4.2.1

Answer 1

Я нашел проблему. Когда мы используем TPL & displayTpl на Combobox, функция livesearch не будет работать

Answer 2

То, как вы в настоящее время устанавливаете фильтрацию, следует обрабатывать на стороне сервера. Если вы измените queryMode: «remote» на queryMode: «local», фильтр должен работать так, как вы хотите.

queryMode: 'remote' сообщает комбо-поле для вызова прокси с введенным вами значением, и серверу придется возвращать только соответствующие значения. Это полезно, если у вас есть огромный набор данных для поиска

Answer 3

При использовании пользовательских tpl и displayTpl в вашем Combobox, вы можете определить пользовательскую функцию фильтра, например, на клавишу вверх:

// Clear the filter collection without updating the UI 
store.clearFilter(true); 

store.filter([ 
    {filterFn: function(item) { return item.get("identity_number") == "[....]" }} 
]); 

Для получения дополнительной информации проверьте ExtJS documentation.