首页 > 解决方案 > extjs 将父母的可绑定属性绑定到孩子的

问题描述

我有一个容器,里面有一个或多个表单字段。我想将hidden父容器的disabled属性绑定到子项的属性上怎么做?

这里有一个小提琴来说明。我的可选容器中有必填字段。因此,当可见时,它们应该是必需的,当隐藏时它们应该是可选的。我知道我可以添加一个可以设置allowBlank: true但看起来很乏味的处理程序。

标签: extjsextjs6-classic

解决方案


在 viewModel 中注册父级的隐藏状态,以获取子组件中的父级状态。

将 viewModel 中的“containerHidden”属性更改为 true 或 false 以对其进行测试。 这是小提琴

viewModel:{
    data:{
        containerHidden:true
    }
},
defaults: {
    labelAlign: "right"
},
items: [
    {
        xtype: "textfield",
        fieldLabel: "Name",
        allowBlank: false
    },
    {
        xtype: "datefield",
        fieldLabel: "Date of Birth",
        emptyText: "18+ gets more options",
        allowBlank: false,
        listeners: {
            change: "onDoBChange"
        }
    },
    {
        xtype: "container",
        reference: "AgeRestrictedArea",
        bind:{
            hidden:"{containerHidden}"
        },
        defaults: {
            labelAlign: "right"
        },
        items: [
            {
                xtype: "textfield",
                fieldLabel: "Hobby",
                allowBlank:false,
                bind:{
                    disabled: "{containerHidden}"
                }

            }
        ]
    }
]

推荐阅读