1
votes

I've just defined a combobox. Firstly it loads a countrylist and when select a value it's fire a change event which doing a ajax query to DB within searching service;

The thing; this configuration works pretty well when I click and open combobox items. But when I'm typing to combobox's field it's fires listener's store.load and because of none of country selected yet, the search query url gives not found errors of course.

{
                    xtype: 'countrycombo',
                    itemId: 'countryName',
                    name:'country',
                    afterLabelTextTpl: MyApp.Globals.required,
                    allowBlank: false,
                    flex: 1,
                    // forceSelection: false,
                    // typeAhead: true,
                    // typeAheadDelay: 50,
                    store: {
                        proxy: {
                            type: 'ajax',
                            // isSynchronous: true,
                            url: MyApp.Globals.getUrl() + '/country/list?limit=250',
                            // timeout: 300000,
                            reader: {
                                type: 'json',
                                rootProperty: 'data'
                            }
                        },
                        pageSize: 0,
                        sorters: 'description',
                        autoLoad: true
                    }
                    ,
                    listeners: {
                        change: function (combo, countryId) {
                            var cityStore = Ext.getStore('cityCombo');
                            cityStore.getProxy()
                                .setUrl(MyAppp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
                            // Ext.defer(cityStore.load, 100);
                            cityStore.load();
                        }
                    }
                },

I've tried several things as you see in code above to set a delay/timeout for load during typing to combobox text field; Ext.defer, timeoutconfig on proxy, typeAhead config on combo but none of them worked!

I thought that Ext.defer is the best solution but it gives this error:

Uncaught TypeError: me.getAsynchronousLoad is not a function at load (ProxyStore.js?_dc=15169)

How can I set a delay/timeout to combobox to fires load function?

2

2 Answers

1
votes

Instead of Ext.defer(cityStore.load, 100);

try using this :

Ext.defer(function(){

cityStore.load

}, 300);

If this doest work, try increasing your delay

or you can put a logic before loading

like this :

if(countryId.length == 5){

cityStore.load

}

This will ensure that you Entered the right values before loading

Hope this helps, and Goodluck on your project

1
votes

well.. I've tried to implement @Leroy's advice but somehow Ext.defer did not fire cityStore.load. So I keep examine similar situations on google and found Ext.util.DelayedTask

So configured the listerens's change to this and it's works pretty well;

listeners: {
                            change: function (combo, countryId) {
                                var alert = new Ext.util.DelayedTask(function () {
                                    Ext.Msg.alert('Info!', 'Please select a country');
                                });

                                var cityStore = Ext.getStore('cityCombo');

                                cityStore.getProxy().setUrl(MyApp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);

                                if (typeof countryId === 'number') {
                                    cityStore.load();
                                } else {
                                    alert.delay(8000);

                                }
                            }
                        }