javascript - 如何在 extjs6 中将文本字段与组合框值绑定(bind)？

Question

我正在使用 extjs-6在我的申请中。我有一个 combo box .这个组合可以有 3 个值。如果用户选择value1或者value2，它必须注册两个textfield，但是如果他选择value3，他有注册三个textfield。

我知道 extjs-6 有一个 reference 配置，我可以按如下方式使用:

Ext.create('Ext.panel.Panel', {
    title: 'Sign Up',

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Is Admin',
        reference: 'isAdmin'
    },{
        xtype: 'textfield',
        fieldLabel: 'Admin Key',
        bind: {
            disabled: '{!isAdmin.checked}'
        }
    }]
});

我该如何实现？
注意:这些textfield(需要两个value1, vlaue1 theme 和三个value3 theme) .

Answer 1

在我的示例中，我将根据组合框的选定记录禁用文本字段。有两种(甚至更多)方法可以实现这一点。

1. You can bind the selected record of the combo and set 'disabled' of the textfield (or whatever bindable config) using this binded record.

2. You can use a formula and based on the selected value of the combo you return true or false (or another property of the selected record) to set 'disabled' of the textfield.

在 View 的声明中绑定(bind)选定的记录(不使用 View 模型)

要将所选记录绑定(bind)到属性，请将其添加到您的组合配置中:

{
    xtype: 'combo',
    bind: {
        selection: '{selectedRecord}'
    }
}

现在您可以使用该属性来设置禁用。将此添加到您的文本字段的配置中:

{
    xtype: 'textfield',
    bind: {
        disabled: '{!selectedRecord.value}'
    }
}

在这里您可以找到一个工作示例:https://fiddle.sencha.com/#fiddle/tec

使用公式并返回一个值(根据所选记录)进行绑定(bind)

要获取组合的选定记录，请创建一个使用其引用配置绑定(bind)到组合的公式:

formulas: {
     disableTextField: {
         bind: {
             bindTo: '{data2.selection}',
             deep: true
         },
         get: function(record) {
             return record ? record.id !== 3 : true;
         }
    }
 }

现在将“disableTextField”的返回值绑定(bind)到文本字段的所需属性:

{
    xtype: 'combo',
    reference: 'data2'
}, {
    xtype: 'textfield',
    bind: {
        disabled: '{disableTextField}'
    }
}

在这里您可以找到一个工作示例:https://fiddle.sencha.com/#fiddle/te8