Extjs combobox - doQuery callback?

Question

Hi there,

I'm using the following combobox:

            var cb = new Ext.form.ComboBox({
            store: someDs,              
            fieldLabel: 'test',
            valueField:'name',
            displayField:'name_id',
            typeAhead: true,
            minChars: 3,
            triggerAction: 'query'
        });

So when the user typed in 3 chars, a query to the server is made showing the proper results.

Now I try to make the user input programmatically usint the doQuery() function of the combobox. After calling the doQuery() method, I want to seledct an Item via setValue().

        cb.doQuery('myval');
        cb.setValue('myval');

The problem is that setValue() can't select the propper value, because at the time it is called, the request started through doQuery() hasn't finished. So I need something like a callback in which I could use setValue() - but doQuery() doesn't seem to have a callback function.

any ideas? thanks!

Answer 1

Hi again, I'm answering myself bacause code formatting ist not avaiable in the comment.

Igor: it works but it feels like a ugly hack then a clean solution. For a better understanding I explain the situation: I have a GridPanel. When the user clicks on a row on this panel, I want to preselect the selected value in the combobox. Because there's a lot of data I want to lower it with using the doQuery-function of the combobox. In the GridPanel's rowClick-event i have the following code:

var myrec = Ext.getCmp('mygrid').store.getAt(rowIndex);

mycombo.store.on('load', myfn1 = function() {
    // When the store has finisihed loading, select item in the combobox
    mycombo.setValue(myrec.data.customer_id);
    // Remove the function assigend to the load event... 
    // ...(when user types directly to the combobox instead clicking on a row...)
    mycombo.store.un('load', myfn1);
});
// setValue has to be called again, because the load-event doesn't fires
// when doQuery is called with same params
mycombo.setValue(myrec.data.customer_id);
// Call do query to fill the combo only with the relevant values
mycombo.doQuery(myrec.data.customer_id);

Answer 2

The ComboBox has a beforequery event that gives you the option to intercept the query, do your own store load instead and cancel the ComboBox query. Also, in your example you are saving the handler function to a variable and then calling un from within the handler. That's totally unnecessary, as you can pass the options {single: true} as the fourth parameter to on (third parameter is scope).

If I understand your question, you want to set the value of a combo to a certain value, say customer id 123. The problem is that the record for customer 123 is not loaded so you don't have any data in the store regarding that customer. Am I right?

What you would want to do then is (this is not necessarily correct for your situation, just a direction to get you started):

combo.on('beforequery', function(q) {
  q.cancel = true;
  var id = q.query;
  combo.setDisabled(true);
  combo.store.on('load', function() {
    combo.setValue(id);
  }, combo.store, {single: true});
  combo.store.reload({
    customer_id: id
  });

  return q;
});