CODEWITHSUNDEEP
javascriptextjsextjs4
rclakmal
rclakmal

Reputation: 1982

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
                    },

So this sends the AJAX call and show suggestions on typing the first letter. However, I want to show the suggestions when the combo is focused and even before the typing starts.

I could send out the AJAX call using the 'focus' listener. However, it doesn't show the suggestions. 

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

Upvotes: 0

Views: 42

Answers (1)

Saurabh Nemade
Saurabh Nemade

Reputation: 1592

You can check if picker is created. If its created just show otherwise invoke trigger function.

Here is example : 

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

                    }
                }
            }]
        });
    }
});

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

Upvotes: 1

Related Questions