ExtJS 自定义绑定

Question

我有一个表格中的一个表格。我需要将外部表单中字段的隐藏属性绑定到内部表单中字段的选中状态。我假设我可以通过设置自定义 getter/setter 来通过绑定来做到这一点，但不确定......这是我的想法：

Answer 1

你可以这样做：

Ext.define('Test.InnerForm', {
    extend: 'Ext.form.Panel',
    xtype: 'innerform',

    defaultListenerScope: true,

    config: {
        isFoo: false  
    },

    twoWayBindable: {
        isFoo: true
    },
    publishes: ['isFoo'],

    items:[{
        xtype: 'checkbox',
        fieldLabel:'cb',
        listeners: {
            change: 'onCheckChange'
        }
    }],

    onCheckChange: function(box, checked) {
        this.setIsFoo(checked);
    }
});

Ext.define('Test.OuterForm', {
    extend: 'Ext.form.Panel',
    xtype: 'outerform',
    viewModel: true,
    items:[{
        xtype:'innerform',
        reference: 'innerform'
    },{
        xtype: 'textfield',
        fieldLabel: 'want to hide this when cb is checked',
        bind: {
            hidden: '{innerform.isFoo}'
        }
    }]
});


Ext.create('Test.OuterForm', {
    title: 'Outer form',
    width: 500,
    height: 500,
    bodyPadding: 10,
    renderTo: Ext.getBody()
});

ExtJS 自定义绑定

ExtJS custom bind

bind

extjs

viewmodel

extjs5