How to send AJAX Request only if store size is 0

Question

How to send AJAX request for combo box by having condition that current store size is 0.

Basically I have two remote combo box which are cascaded and both are lazily loaded ( This behaviour cannot be changed)

I found even if the second combo box is cascaded based on events in first combobox upoun expansion it makes AJAX call to server ( Only first expansion though)

querymode local and autoload option will not work as it load the combo box on page load when store is created.

Given below is code snippet.

  xtype: 'combo',id='firstcombo', name: 'DEFAULT_VALUE' ,minChars:2, value: decodeHtmlContent('') ,width:200 ,listWidth:500, resizable: true,
 valueField : 'id', displayField: 'id', pageSize: 15,forceSelection:true, enableKeyEvents: true,
 store: new Ext.data.Store({reader: new Ext.data.CFQueryReader({id: 'NAME', 
            fields:[{name:'id', mapping:'id'}]}), 
            fields: [{name:'id', mapping:'id'}], 
            url:'server/ajax/Params'
            }

 }),
 listeners : {
         select:function(combo, record, index) {
            this.setRawValue(decodeHtmlContent(record.get('id')));
            cascadeFields();
        }



 xtype: 'combo',id='secondcombo', name: 'DEFAULT_VALUE' ,minChars:2, value: decodeHtmlContent('') ,width:200 ,listWidth:500, resizable: true,
 valueField : 'id', displayField: 'id', pageSize: 15,forceSelection:true, enableKeyEvents: true,
 store: new Ext.data.Store({reader: new Ext.data.CFQueryReader({id: 'NAME', 
            fields:[{name:'id', mapping:'id'}]}), 
            fields: [{name:'id', mapping:'id'}], 
            url:'server/ajax/Params',
            baseParam:{valuefirst:''}
            },
            listeners: {

                beforeload: function(store, options) {
                    var value = Ext.getCmp('fistcombo').value;
                    Ext.apply(options.params, {

                                valuefirst:value
                            });


                }, 

 }),
 listeners : {
         select:function(combo, record, index) {
            this.setRawValue(decodeHtmlContent(record.get('id')));
        }


function cascadeFields()
{

  var combo = Ext.getCmp('secondcombo');

  if(combo.store)
  {

  var store = combo.store;


  combo.setDisabled(true);
  combo.clearValue('');
  combo.store.removeAll();
  combo.store.load();        
  combo.setDisabled(false);

  }
}

sra sra · Accepted Answer · 2012-12-19T18:26:49

To just extend your code you can do it Like so

listeners: {
    beforeload: function(store, options) {
        if (store.getCount() > 0) {
            return false; // will abort the load operation.
        }
        var value = Ext.getCmp('fistcombo').value;
        Ext.apply(options.params, {
             valuefirst:value
        });
    }
}

This should work all the same in ExtJS 3.x and ExtJS4.x cause you didn't specified this. But I guess you are using 3.x

If this hangs the combo give me feedback cause there is still another but a bit more complex way.

How to send AJAX Request only if store size is 0

1 Answers