Ext.ux.ComboBoxAutoLoad

[daspunkt]

This is a combobox that upon rendering autoloads and displays the first entry from its store.



Ext.namespace('Ext.ux');

/**
* @class Ext.ux.ComboBoxAutoLoad
* @extends Ext.form.ComboBox
* A ComboBox that automatically loads the store and displays its first entry.
*/
Ext.ux.ComboBoxAutoLoad = function(config){
Ext.ux.ComboBoxAutoLoad.superclass.constructor.call(this, config);
this.addListener({
'render': function(combo){
if (this.store !== null) {
this.store.load({
callback: function(records, options, success){
if (records.length > 0 && success) {
this.setValue(records[0].data[this.displayField]);
}
},
scope: this
});
}
}
});
};

Ext.extend(Ext.ux.ComboBoxAutoLoad, Ext.form.ComboBox, {});


Usage example:


new Ext.ux.ComboBoxAutoLoad ({
fieldLabel: 'Hostname',
displayField: 'name',
forceSelection: true,
selectOnFocus: true,
lazyInit: false,
mode: 'local',
triggerAction: 'all',
minChars: 0,
store: new Ext.data.Store({
reader: new Ext.data.XmlReader(
{record: "host", success: '@success'},
['name']),
proxy: new Ext.data.HttpProxy({
url: 'rpc.jsp',
method: 'POST'
}),
baseParams: {func: 'getHostNames'}
})
})

[6epcepk]

Thanks for ux!
Is it possibly to load comboBox items before render?
For example:

var = new Ext.ux.ComboBoxAutoLoad
...
form data load
...
var.setValue(5);
...
render form
I'm trying to modify your ux:

Ext.ux.ComboBoxAutoLoad = function(config){
Ext.ux.ComboBoxAutoLoad.superclass.constructor.call(this, config);
this.addListener({
'render': function(combo){
if (this.store !== null) {
this.store.load({
callback: function(records, options, success){
this.currentValue = this.getValue();
if (records.length > 0 && success) {
this.setValue(records[0].data[this.displayField]);
this.selectByValue(this.currentValue, true);
}
},
scope: this
});
}
}
});
};
But this.getValue() nothing returns, but I sets value previuosly.
Any suggestions?
Thanks.

[lvanderree]

Thanks!

I used your implementation as a base for my extension as you can find here:
http://fun4me.demon.nl/test/sfExtjsThemePlugin/js/extUxComboBoxAutoLoad.js

The live demo can be found here:
http://fun4me.demon.nl/test/test_dev.php/city

With this extension I can load values in the store whenever they are required! Normally you would load all values with an initial query, but it can be the case that there are more values needed then loaded at the first time (due to paging). Queries are normally done only on the displayField, but now I can now query on the valueField to load only the required value into the store! I use a renderer to render the correct displayValues the first time.