How do I bind to a combobox display value?

Question

How do I bind to a combobox's name (ie display text) to some other component?

I have a combobox called 'combo', and I have a label in a panel somewhere else that updates itself with the combo display value. The two widgets are bound via a ViewModel.

If I set the bindings like this :

combo.setConfig({bind: {value: bindName}};

then the label will show the value of the combo (ie. key).

If I do this :

combo.setConfig({bind: {name: bindName}};

then I get this error message :

"Cannot bind name on Ext.form.field.ComboBox - missing a setName method."

I have gone through other getter/setter methods in combobox with no success, having tried :

combo.setConfig({bind: {name: displayField}};

combo.setConfig({bind: {name: rawValue}};

Fiddle : https://fiddle.sencha.com/#fiddle/1bum

The name of a combobox is not the display text, but the name of the form field (if the name is combo1, the form will submit the value value as combo1:value or store it in the model field with name combo1. You are trying to bind to the "display value", which has no property and no config option to set it. I fear that you would have to do the bind manually. What are you trying to achieve? — Alexander
basically i want to bind a combo with display/value pairs. I want to show the display text on a panel somewhere else in my application. — Oliver Watkins
here is a fiddle that demonstrates the problem : fiddle.sencha.com/#fiddle/1bum — Oliver Watkins

Evan Trimboli Evan Trimboli · Accepted Answer · 2016-06-14T11:01:14

Add a reference to the combo and bind to the selection:

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'form',

    viewModel: {
        type: 'test' // references alias "viewmodel.test"
    },

    bind: {
        title: 'Hello {name} {theCombo.selection.name}'
    },

    items: [{
        xtype: 'textfield',
        fieldLabel: 'first name',
        bind: '{name}'

    }, {
        valueField: 'id',
        displayField: 'name',
        fieldLabel: 'last name',
        reference: 'theCombo',
        xtype: 'combo',
        bind: '{combo}',
        store: {
            fields: ['id', 'name'],
            data: [{
                "id": "1",
                "name": "Jonston"
            }, {
                "id": "2",
                "name": "Billson"
            }, {
                "id": "3",
                "name": "Wayneston"
            }]
        }
    }]
});

How do I bind to a combobox display value?

1 Answers