extjs bind parent's bindable property to child's

Question

I have a container with one or more form fields in it. I would like to bind the hidden property of the parent container to the disabled property of the child items How do we do this?

I have a fiddle here to illustrate. I have fields in my optional container that are required. So when visible, they should be required, when hidden they should be optional. I know that I can add a handler that can set allowBlank: true but that seems tedious.

Answer 1

Register parent's hidden state in viewModel to get parents state in child component.

change "containerHidden" property in viewModel to true or false to test it. here is fiddle

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}"
                }

            }
        ]
    }
]