如何在extjs6中将文本框与组合框值绑定？

Question

我在我的应用程序中使用第六条。我有一个组合盒。这个组合可以有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}'
        }
    }]
});

如何实现这个

Note：这些textfield( value1, vlaue1需要两个主题，value3需要三个主题)。

Answer 1

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

1. 可以使用此绑定记录绑定组合框的选定记录，并设置textfield的“禁用”(或任何可绑定的配置)。
2. 您可以使用公式，并根据所选的组合框的值返回true或false (或所选记录的另一个属性)来设置textfield的“禁用”。

在视图声明中绑定所选记录(不使用视图模型)

若要将所选记录绑定到属性，请将其添加到组合框中：

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

现在，您可以使用该属性设置禁用。将其添加到textfield的配置中：

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

在这里您可以找到一个有用的示例：https://fiddle.sencha.com/#fiddle/tec

使用公式并返回一个值(基于所选记录)来绑定

若要获取组合框的选定记录，请使用组合框的引用配置创建绑定到组合框的公式：

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

现在，将'disableTextField‘的返回值绑定到所需的textfield属性：

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

在这里您可以找到一个有用的示例：https://fiddle.sencha.com/#fiddle/te8