extjs bind parent's bindable property to child's

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.

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

            }
        ]
    }
]