ExtJS Combobox with 2 identical display values not changing value on select

Question

I have a combobox that populates with a list of addresses:

this.entityAddressField = new Ext.form.ComboBox(
{
    id: 'entityAddressField',
    fieldLabel: 'Address',
    store: entityAddressStore,
    mode: 'local',
    width: 250,
    valueField: 'entity_address_id',
    displayField: 'address_type',
    tpl: new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
        '<p><b>{address_type}</b></p>',
        '<p>{address_1}</p>',
        '<p>{address_2}</p>',
        '<p>{city}, {state_code} {zipcode}</p>',
        '</div></tpl>'
    ),
    itemSelector: 'div.search-item',
    hidden: true,
    triggerAction: 'all',   
    listeners: {
        select: function(combo, record, index) {
            me.entityAddressDisplay.update(address_template.apply(record.data));
            me.entityAddressDisplay.show();
        }
    }
});

The list shows the full address when expanded, but once selected the combobox will only show the displayField, which is the address type (Home, Work, etc.).

In the case that two "Home" addresses are listed (same type but different addresses), if I change the combobox from one "Home" address to the other - calling:

this.entityAddressField.getValue();

will return the entity_address_id of the originally selected item, instead of the newly selected.

Are there rules unknown to me that prevent the combobox from having two records with the same displayField set, even though the valueField between the two is unique?

Or am I missing something else?

score 1 · Accepted Answer · answered May 12 '11 at 16:14

When the combobox is closed, it will display the displayField value. It is unaffected by your modified tpl configuration on the combobox.

One workaround would be to create a dynamic field in your record definition that concats the values together.

Ext.data.Record.create({
    {name: 'address_type', mapping: 'address_type'},
    ..........,
    ..........,
    ..........,
    // simple name concat
    {name: 'simple_name', mapping: 'address_type+" "+obj.address_1+" "+obj.address_2+"  "+obj.city+", "+obj.state_code+" "obj.zipcode'}
});

You can also nest ternary operators and such into this field if you need to do conditionals on optional fields like address 2....

Ext.data.Record.create({
        {name: 'address_type', mapping: 'address_type'},
        ..........,
        ..........,
        ..........,
        // simple name concat
        {name: 'simple_name', mapping: 'address_type+" "+obj.address_1+" "+(obj.address_2 ? obj.address_2+"  ": "")+obj.city+", "+obj.state_code+" "obj.zipcode'}
    });

If I am understanding correctly, this dynamic field would have to be used as the displayField for the combobox in order to work? — Keylan, May 13 '11 at 16:20

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

It sounds like you're having a similar problem to this one. Make sure you have the idProperty set in your store or reader. It's what the store uses to uniquely identify records it contains.

edited May 23 '17 at 10:34

Community

1
1

answered May 12 '11 at 17:28

wes

7,795
6
31
41

ExtJS Combobox with 2 identical display values not changing value on select

2 Answers2