extjs 绑定 parent 的可绑定 属性 到 child 的
extjs bind parent's bindable property to child's
我有一个容器,其中包含一个或多个表单域。我想将 parent 容器的 hidden
属性 绑定到 child 项目的 disabled
属性
我们如何做到这一点?
我有一个fiddlehere来说明。我的可选容器中有一些字段是必需的。因此,当可见时,它们应该是必需的,当隐藏时,它们应该是可选的。我知道我可以添加一个可以设置 allowBlank: true
的处理程序,但这看起来很乏味。
你可以在hide\show听众的帮助下做到这一点fiddle
在 viewModel 中注册父级的隐藏状态,以在子组件中获取父级状态。
将 viewModel 中的 "containerHidden" 属性 更改为 true 或 false 以测试它。
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}"
}
}
]
}
]
我有一个容器,其中包含一个或多个表单域。我想将 parent 容器的 hidden
属性 绑定到 child 项目的 disabled
属性
我们如何做到这一点?
我有一个fiddlehere来说明。我的可选容器中有一些字段是必需的。因此,当可见时,它们应该是必需的,当隐藏时,它们应该是可选的。我知道我可以添加一个可以设置 allowBlank: true
的处理程序,但这看起来很乏味。
你可以在hide\show听众的帮助下做到这一点fiddle
在 viewModel 中注册父级的隐藏状态,以在子组件中获取父级状态。
将 viewModel 中的 "containerHidden" 属性 更改为 true 或 false 以测试它。 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}"
}
}
]
}
]