如何绑定到组合框显示值？答案

【问题标题】：How do I bind to a combobox display value?如何绑定到组合框显示值？
【发布时间】：2016-06-13 11:57:49
【问题描述】：

如何将组合框的名称（即显示文本）绑定到其他组件？

我有一个名为“combo”的组合框，我在其他地方的面板中有一个标签，该标签使用组合显示值进行自我更新。这两个小部件通过 ViewModel 绑定。

如果我这样设置绑定：

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

然后标签将显示组合的值（即键）。

如果我这样做：

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

然后我收到此错误消息：

“无法在 Ext.form.field.ComboBox 上绑定名称 - 缺少 setName 方法。”

我已经尝试过组合框中的其他 getter/setter 方法，但没有成功：

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

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

小提琴：https://fiddle.sencha.com/#fiddle/1bum

【问题讨论】：

组合框的name不是显示文本，而是表单字段的名称（如果名称为combo1，表单会将值value提交为combo1:value或将其存储在名称为combo1 的模型字段中。您正在尝试绑定到“显示值”，它没有属性也没有配置选项来设置它。我担心你必须手动进行绑定。什么你想达到吗？
基本上我想将组合与显示/值对绑定。我想在我的应用程序的其他地方的面板上显示显示文本。
这是一个演示问题的小提琴：fiddle.sencha.com/#fiddle/1bum

标签： extjs extjs6

【解决方案1】：

添加对组合的引用并绑定到选择：

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"
            }]
        }
    }]
});

【讨论】：