[ExtJs] viewModel与publishes 控件相互绑定

当我们在声明控件时,若是声明了reference,在此控件拥有viewModel的情况下,可以使用

bind:'{referenceKey.属性}'

如下:

{
    xtype:'container',
    viewModel:{},
    items:[
        {
            xtype:'checkbox',
            reference:'chk',
            label:'勾选后隐藏Text',
        },
        {
            xtype:'textfield',
            label:'文本框',
            bind:{
                hidden:'{chk.checked}'
            }
        }
    ]
}

效果如下:

原因在此文章中解释过[ExtJS] reference 引用查找器 与viewModel


但是当我们想实现下列需求时怎么办?

B控件能够默认显示A控件的名称,B控件能绑定A控件的其他属性

这时就需要使用publishes属性

publishes属性的官方定义:

组件使用了publishes将其配置属性,发布到对应的viewModel中。可以配置一个多个属性

ps:想要将其属性在其viewModel中可以访问到,控件需要定义reference

{
    xtype:'控件别名',
    reference:'自定义key',
    publishes:'控件的属性'// 或者是 publishes:[ '控件属性1','控件属性2' ]
}

示例:

想将checkboxlabel值,作为文本框的值

{
    xtype:'container',
    viewModel:{},
    items:[
        {
            xtype:'checkbox',
            reference:'chk',
            label:'勾选后显示Text',
            publishes:'label',//将checkbox的label属性 发布到viewModel中
        },
        {
            xtype:'textfield',
            label:'文本框',
            bind:{
                hidden:'{!chk.checked}',
                value:'{chk.label}'//使用 referenceKey.属性 访问 viewModel中的值
            }
        }
    ]
}

效果如下:

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值