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 server to take the correct display value for the combobox. But, load function is never called.. how can i fix it ?

2. I want to display a text before the combobox, so i added the attribute fieldLabel: 'Save logs to:'. But the text is not displayed.

Thx, Yoni

this.log_save_combo = new Ext.form.ComboBox
    ({
        store: ['Device', 'USB1', 'USB2']
        , id: 'cplogs_log_save_combo'
        , name: 'cplogs_log_save_combo'
        , triggerAction:'all'
        , fieldLabel: 'Save logs to:'
        , editable: false
        //, value: "Device"
        , listeners: {
                'load': function(){
                        alert("in load function");
              }
    });

Solution 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'

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

Solution 3

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')