代码之家 › 专栏 › 技术社区 › rclakmal

将Ajax请求发送到组合框的焦点上,而不是键入

extjs4 extjs javascript

rclakmal · 技术社区 · 7 年前

                    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调用,并显示关于键入第一个字母的建议。然而,我想在组合被关注时,甚至在输入开始之前,显示这些建议。

我可以使用“焦点”侦听器发送AJAX调用。然而,它没有显示建议。

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

1 回复 | 直到 7 年前

Saurabh Nemade 7 年前

您可以检查是否创建了选取器。如果创建了它,则只需显示,否则调用触发器函数。

以下是示例:

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

                    }
                }
            }]
        });
    }
});

小提琴示例: https://fiddle.sencha.com/#view/editor&fiddle/2a04