3

I'm not sure what's wrong with my code. However after I type 4 characters on combobox, all of value will be displayed, not filtered based on characters that I have typed. Because of that my live search is broken. Please see attached image for better illustration.

Illustration Image

I'm creating combobox inside panel as one of item

    {
        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'm also add change event listener

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

This is the function of change event listener, loading another store (not the store of ComboBox)

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

N.B. I'm using 4.2.1

3 Answers 3

2

The way you currently have it setup the filtering should be handled server side. If you change queryMode: 'remote' to queryMode: 'local' then the filter should work the way you want.

queryMode: 'remote' tells the combo box to call the proxy with the value you typed and the server would have to return only matching values. This is helpful if you have a huge dataset to search

1
  • I have changed it to 'local', but the filter still doesn't work Feb 7, 2014 at 23:35
1

I found the problem. When we use tpl & displayTpl on Combobox, the livesearch feature won't work

0

When you are using custom tpl and displayTpl in your Combobox, you can define a custom Filter function, for example on key up:

// 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 the ExtJS documentation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.