具有2个相同显示值的ExtJS组合框不会更改选择的值

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?

Answer 1

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'}
    });

Answer 2

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.