Geek asks and answers

Live Combo Box not working ExtJS 4.2.1

I'm not sure what happened to my code. However, after I type 4 characters in the combo box, all values ​​will be displayed, not filtered, based on the characters that I typed. Because of this, my live search has been violated. Please see the attached image for a better illustration.

Illustration image

I create an internal combobox as one of the elements

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

This is the store:

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

I also add a change event listener

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

This is a change event listener function, loading another store (and not a ComboBox store)

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

NB I am using 4.2.1

+3
source share
3 answers

I found a problem. When we use tpl and displayTpl in Combobox, the real-time search function does not work.

+1

, , . queryMode: 'remote' queryMode: 'local', , .

queryMode: 'remote' - , , . ,

+2

When you use custom tpland displayTplin your Combobox, you can define a custom filter function, for example, on the keyboard:

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

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

For more information, check out the ExtJS Documentation .

0
source

More articles:


All Articles