View Full Version : Ext.ux.form.AutoCombo - Combobox that populates choices when setting value

28 Apr 2011, 11:34 AM
Another simple extension that we use regularly is a combobox that populates the choices when setting its value initially. This prevents a second request to the server requesting the data to show in the combo box. So for example, if you include this on a form, you could load data into the form with the following JSON:

"success": true,
"data": {
"Id": 1234,
"TextField1": "Value1",
"ComboField1": {
"value": 3,
"records": [
[1,"Choice 1"],
[2,"Choice 2"],
[3,"Choice 3"],
[4,"Choice 4"]

the records can also be of the form: ["Id": 1,"Description": "Choice 1"] etc if the fields you want to populate in the model are not consecutive.

The code for this modified combobox is as follows:

// vim: ts=4:sw=4:nu:fdc=4:nospell
* @class Ext.ux.form.AutoCombo
* @extends Ext.form.ComboBox
* A simple extension to the basic combo box that allows options to be populated when setting the fields value
* @author Conor Armstrong
* @copyright (c) 2011 Conor Armstrong
* @date 28 April 2011
* @version 0.1
* @history
* 0.1- 28 April 2011 - Initial Version
* 0.2 - 10 May 2011 - Cases when loading objects
* 0.3 - 20 Jun 2011 - Cases when passed array is empty. Stop loading a null array
* @license Ext.ux.form.AutoCombo.js is licensed under the terms of the Open Source
* LGPL 3.0 license. Commercial use is permitted to the extent that the
* code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
* <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
* target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>

Ext.define('Ext.ux.form.AutoCombo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.autocombo',

// defaults
* Defines names that are used for "value" and "records" members
paramNames:{value:'value', records:'records'},

setValue:function(value) {
var val = value;
if('object' === typeof val) {
switch (Object.prototype.toString.call(val)) {
case '[object Object]':
if (val.getId) {
/* val is a model */
} else if (undefined !== val[this.paramNames['records']]) {
/* val is an object containing records and value */
if (val[this.paramNames['records']]) {
val = val[this.paramNames['value']];
case '[object Array]':
if (val) {

You would define the combobox, like any other. For example:

Ext.define('Country', {
extend: 'Ext.data.Model',
fields: [
idProperty: 'Id'

var combo=Ext.create('Ext.ux.form.AutoCombo', {
width: '200',
fieldLabel: 'Country',
name: 'CountryId',
typeAhead: true,
emptyText: 'Please Select',
store:Ext.create('Ext.data.Store', {
model: 'Country'


4 May 2011, 8:32 AM
There is a user override for the ExtJS 3 combobox that loads only the currently selected record instead of all which is very useful for stores with a large number of elements for edit forms.
Would be good to include that functionality here too.

4 May 2011, 1:59 PM

haven't seen that one. have you a link?

5 May 2011, 12:43 AM

5 May 2011, 12:59 AM

I've just had a look at that one. It appears the functionality you refer to relates to delaying execution of setValue until such time as the store is populated.

In this extension, the server can provide both the value and all the options at the one time, so there would be no need for such a delay.

In any event, I will (when I get some free time) add the additional delay to cover the case where options are not being provided.

9 May 2011, 11:52 AM

lets see how this pans out first: http://www.sencha.com/forum/showthread.php?124702-OPEN-ComboBox-s-setValue-call-with-a-remotely-loaded-Store&highlight=combobox

1 Jun 2011, 8:10 AM
The records array can also be of the form:

records: [
["Id":1,"Description":"Choice 1"],
["Id":2,"Description":"Choice 2"]

if the fields you want to populate in the model are not consecutive. Id and Description to be replace with whatever fields you want to auto populate in your model.

20 Jun 2011, 7:33 AM
Component updated to cover case when passed array is empty on initialisation.

23 Mar 2012, 12:23 AM
Thank you so much for the extension. So how do i put the loading mask while its loading the data from store (remote/local) and comparing the records until its done?