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 ?
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");
}
});
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 -----------------------------------------
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.
In order to display label field, you need to set your layout property of your container as
layout: 'form'
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));
});
}
}
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')
- First Load the store with
store.load()
- In the callback set the value with
setValue()
Example:
store.load({
callback: function () {
form.findField('name_of_the_combo').setValue('your_value');
}
});
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:');
}
}