发送 Ajax 请求 ComboBox 的焦点而不是键入

Send Ajax request onFocus of a ComboBox rather than on typing

                    xtype       : 'combo',
                    allowBlank  : false,
                    hideTrigger : true,
                    name        : 'dummyName',
                    itemId      : 'value',
                    fieldLabel  : 'Value',
                    labelWidth: 40,
                    store       : {
                        fields  : ['value'],
                        proxy   : {
                            type: 'ajax',
                            url: '/DUMMY/URL/',
                            reader: {
                                type: 'json',
                                rootProperty: 'results'
                            }
                        }
                    },
                    displayField: 'value',
                    valueField  : 'value',
                    queryMode   : 'remote',
                    queryParam  : 'search',
                    typeAhead   : false, 
                    minChars    : 0,    
                    queryDelay  : 500, 
                    emptyText   : 'mandatory',
                    msgTarget   : 'none',
                    listConfig  : {
                        maxHeight   : 220
                    },

所以这会发送 AJAX 调用并显示有关键入第一个字母的建议。但是,我想在组合聚焦时甚至在打字开始之前显示建议。

我可以使用 'focus' 侦听器发出 AJAX 呼叫。但是,它没有显示建议。

                   listeners:{
                        'focus': function(){
                                this.store.load();
                            }
                    }

您可以检查选择器是否已创建。如果它的创建只是显示否则调用触发函数。

示例如下:

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: true
        });

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'combo example',
            layout: 'fit',
            items: [{
                xtype: 'combobox',
                fieldLabel: 'Choose State',
                store: states,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                listeners: {
                    focus: function (component) {
                        component.store.load(function () {
                            if (Ext.isEmpty(component.picker)) {
                                component.onTriggerClick();
                            } else {
                                component.picker.show();
                            }
                        });

                    }
                }
            }]
        });
    }
});

示例 Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2a04