Extjs 4 how to set combobox value without loading a store

Question

I have an ExtJS 4.2.1 form with a combobox.

xtype: 'container',
    width: 360,
    items: [{
        xtype: 'combobox',
        fieldLabel: 'Shift Code',
        name: 'ShiftCode',
        store: Ext.create('SoftHuman.store.catalog.ShiftCode'),
        blankText: ' ',
        allowBlank: false,
        displayField: 'Description',
        valueField: 'ShiftCode'
    }]

The combo when I click on the trigger icon It will get the data from the store and then show the items, as show in the following image.

What I want to do is to set a value and display value in the combo when I load my form and then if the user clicks to expand the combo the store will get the items remotly like it does right now.

This is because I have this form with 25 combos and I don't want to load all them be before I show the form and then assign each combo value because the user won't change all combos values, maybe he will just change 2 or 3, so it doesn't make sense to load them all initially but I want to show the display value in the combo from my record.

Any clue?

Answer 1

You can insert the default value in store and set it a value

 combo.getStore().insert(0, { "valueField": 0, "DisplayField": "All Properties" }, true);
 combo.setValue(0);

Answer 2

What you are missing is the queryMode: 'remote':

From the sencha docs

In queryMode: 'remote', the ComboBox loads its Store dynamically based upon user interaction.

This is typically used for "autocomplete" type inputs, and after the user finishes typing, the Store is loaded.

A parameter containing the typed string is sent in the load request. The default parameter name for the input string is query, but this can be configured using the queryParam config.

In queryMode: 'remote', the Store may be configured with remoteFilter: true, and further filters may be programatically added to the Store which are then passed with every load request which allows the server to further refine the returned dataset.

You can also use queryDelay if you want too. Here's an example I pulled from my code.

 {
                  xtype: 'combo',
                  itemId: 'totalSearchCombo',
                  width: 200,
                  emptyText: 'Total Search',
                  typeAhead: true,
                  editable: true,
                  hideLabel: true,
                  hideTrigger: true,
                  store: 'dropDownList_s',
                  mode:'remote',
                  displayField: 'display_nm',
                  anchor: '100%',
                  matchFieldWidth: false,
                  listConfig:
                      {
                          width: 195,
                          loadingText: 'Searching...',
                          emptyText: 'No matching items found, or not enough characters entered.',
                          getInnerTpl: function () {
                              var tpl = '<div>{display_nm}</div>';
                              return tpl;
                          }
                      },
                  //pageSize: 15,
                  listeners: {

                  }


              }

Answer 3

The solution was to set the following methods:

combo.setValue('here the value');
combo.setRawValue('here the value to display');