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的两个主题和value3的三个主题是必需的。）

Answer 1

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

您可以绑定所选的组合记录并设置“已禁用”＃39;的使用此绑定的textfield（或任何可绑定配置）记录。
您可以使用公式并根据所选的值组合你返回true或false（或所选的另一个属性）记录）设置“禁用”＃39;文本域。

将所选记录绑定在视图声明中（不使用viewmodel）

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

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

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

{
    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;
         }
    }
 }

现在绑定＆＃39; disableTextField＆＃39;的返回值到textfield的所需属性：

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

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

如何将文本字段与extjs6中的组合框值绑定？

1 个答案:

将所选记录绑定在视图声明中（不使用viewmodel）

使用公式并返回值（基于所选记录）以绑定