实时搜索组合框在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'
}
});

我也添加了一个change事件监听器。

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

这是更改事件监听器的功能，加载另一个存储（而不是ComboBox的存储）。

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

注意：我正在使用4.2.1版本。

- Eldwin Eldwin

Answer 1

目前您的设置应该由服务器端进行过滤处理。如果将queryMode: 'remote'更改为queryMode: 'local'，则过滤器应该按照您想要的方式工作。

queryMode: 'remote'告诉组合框使用您输入的值调用代理，并且服务器只返回匹配的值。如果您有一个庞大的数据集需要搜索，则这非常有帮助。

- Andrew Lapham

---

我已经改成了“local”，但是过滤器仍然无法工作。 - Eldwin Eldwin

Answer 2

我找到了问题所在。当我们在Combobox上使用tpl和displayTpl时，livesearch功能将无法工作。

- Eldwin Eldwin

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文档。

- Darin Kolev