extjs: How to l set value for combobox when loading

Question

1. I am looking for a load listener, that when the combobox is up, load will be called and preform an ajax to the s

Answer 1

There is no load event for a combo.. hence the code you wrote is not getting executed. You already have a store defined with values.. are you trying to load new values to the store that is attached to the combo box? What do you mean by "combobox is up"?

To load a combo box with values from the server, you only need to load the store. Refer to this article on how to load the combobox.

----------------------------------------- UPDATE -----------------------------------------

1. Are you trying to load a form with values? In that case you can load the values using the load method available with the BasicFrom. Refer to this example. Even though it uses XML you can easily change to load data from JSON.

2. In order to display label field, you need to set your layout property of your container as

   layout: 'form'

Answer 2

As a general solution to the problem, I've gone with

listeners:{
    scope: this,
    afterRender: this.selectFirstComboItem
}

with

selectFirstComboItem: function(combo) {
    // This will tell us if the combo box has loaded at least once
    if (typeof combo.getStore().lastOptions !== "undefined") {
        // Grab the first value from the store
        combo.setValue(combo.getStore().first().get(combo.valueField));
    }
    else {
        // When the store loads
        combo.getStore().on("load", function(store, items){
            // Grab the first item of the newly loaded data
            combo.setValue(items[0].get(combo.valueField));
        });
    }
}

Answer 3

There is no load event for combo. What you can do is load the data in the combo from store on load of your form. After that you can set the field level on select event of combo.

Example:

listeners:{
    select: function(){
       Ext.getCmp('id_of_the_field')
      .getEl()
      .down('label.x-form-cb-label')
      .update('Save logs to:');                             
    }
}

Answer 4

1. First Load the store with store.load()
2. In the callback set the value with setValue()

Example:

store.load({
        callback: function () {
             form.findField('name_of_the_combo').setValue('your_value');
         }
    });

Answer 5

One of the things that I have wanted to do is have a default value from the store be selected when the combobox is rendered. Setting the combo box value to the first value from the store has worked pretty well.

Ext.create('Ext.form.field.ComboBox', {
...
value : this.myStore.first().get('aFieldName')