CODEWITHSUNDEEP
extjs
Sarah
Sarah

Reputation: 21

Change display value in ext.form.combobox

Which property in Ext.form.Combobox is the field currently displayed in the ComboBox?

After a user selects something from the JsonStore and the value has been passed to combobox, the displayField is what shows up in the ComboBox's search field. I need to make a ComboBox where a user selects a certain object from JsonStore, but something totally unrelated is what displays in the ComboBox search field (this can't be done by changing any of the properties in the JsonStore record, because the string that is searched by the and the value that is passed in the end can not be different). I just need to override what is displayed in the combobox.

Upvotes: 0

Views: 3409

Answers (2)

Amol Katdare
Amol Katdare

Reputation: 6760

What you may want to do is

  • Have the displayField be the "something totally unrelated is what displays in the ComboBox search field"
  • Then, override doQuery to filter the store on aThirdField (or whatever)
  • If you leave it at this, the dropdown will show displayFields as you type. When you select one item from the dropdown, displayField will be displayed in the search box (trigger field).
  • This is all fine except that you want to change what is being displayed in the drop down.
  • To fix this, configure the combobox's tpl property to display aThirdField or aFourthField or whatever you want to display in the dropdown.

In other words, the solution would be along the lines of -

  • Always configure displayField to be the field that you want to see in the trigger field post item selection
  • If you dont want to filter on displayField, override doQuery
  • If you dont want display anything other than displayField in the dropdown list, configure a tpl

Reference - Ext.form.ComboBox

Upvotes: 2

Stefan Kendall
Stefan Kendall

Reputation: 67892

You can make the displayed text different than the value.

    Ext.define('BasicStoreModel', {
        extend: 'Ext.data.Model',
        fields : ['valueField', 'displayField']
    });

    var myStore = new Ext.data.SimpleStore({
        model: 'BasicStoreModel',
        data: [['value1','display1'], ['value2', 'display2']]
    });

items: [...
{
   fieldLabel: 'Label',
   xtype: 'combo',
   name: 'nameOfSelect',
   editable: false,
   store : myStore,
   displayField: 'displayField',
   valueField: 'valueField',
   queryMode: 'local',
   triggerAction: 'all',
}

The first two bits might seem like overkill, but I've wound up creating many SimpleStore instances which use BasicStoreModel. You should be able to extend JsonStore.

Upvotes: 0

Related Questions