ExtJS 5：禁用隐藏卡中的表单字段

Question

我有一个带有无线电组的表单面板，根据无线电组的选择，它会显示一些其他组件。如果未选择radiofield，则其项目将被隐藏，因为它们不属于活动卡片。

现在，如果我在隐藏卡片中设置allowblank: false字段（并且它为空），我的表单仍被视为无效。隐藏意味着用户不想使用它，因此不应将其视为表单的一部分。这是example。

在这个示例中，我有2个表单...顶部表单是我很好奇的...有没有办法让这个工作而不必绑定到禁用？我试着看hideMode，但那不是我想要的。

理想情况下，我不必为我添加的每张卡创建一个公式......这看起来很傻。我意识到我可以创建一个通用的公式，但再次，这似乎是无关紧要的。另一个选择可能是放弃卡片布局，并将每张卡片绑定到隐藏和禁用，但我创建了更多的公式。是否有某种我失踪的财产？

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyController', {
      extend: 'Ext.app.ViewController',
      alias: 'controller.myview',
      onValidityChange: function(form, isValid, eOpts) {
        this.getViewModel().set('isFormValid', isValid);
      }
    });
    Ext.define('MyViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myview',
      data: {
        activeItem: {
          myInput: 0
        }
      },
      formulas: {
        activeCardLayout: function(getter) {
          var myInput = getter('activeItem.myInput');
          console.log(myInput);
          return parseInt(myInput);
        }
      }
    });
    Ext.define('MyForm', {
      extend: 'Ext.form.Panel',
      title: 'My Form',
      controller: 'myview',
      viewModel: {
        type: 'myview'
      },
      layout: {
        type: 'hbox'
      },
      listeners: {
        validitychange: 'onValidityChange'
      },
      dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        layout: {
          type: 'hbox'
        },
        items: [{
          xtype: 'button',
          text: 'Save',
          reference: 'saveButton',
          disabled: true,
          bind: {
            disabled: '{!isFormValid}'
          }
        }]
      }],
      items: [{
        xtype: 'radiogroup',
        vertical: true,
        columns: 1,
        bind: {
          value: '{activeItem}'
        },
        defaults: {
          name: 'myInput'
        },
        items: [{
          boxLabel: 'None',
          inputValue: '0'
        }, {
          boxLabel: 'Something',
          inputValue: '1'
        }]
      }, {
        xtype: 'container',
        layout: 'card',
        flex: 1,
        bind: {
          activeItem: '{activeCardLayout}'
        },
        items: [{
          xtype: 'container',
          layout: 'fit'
        }, {
          xtype: 'container',
          layout: 'fit',
          items: [{
            xtype: 'textfield',
            fieldLabel: 'hello',
            allowBlank: false
          }]
        }]
      }]
    });
    Ext.define('MyViewModel2', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myview2',
      data: {
        activeItem: {
          myInput: 0
        }
      },
      formulas: {
        disableSomethingCard: function(getter) {
          return getter('activeItem.myInput') !== '1';
        },
        activeCardLayout: function(getter) {
          var myInput = getter('activeItem.myInput');
          console.log(myInput, 'here');
          return parseInt(myInput);
        }
      }
    });
    Ext.define('MyForm2', {
      extend: 'MyForm',
      title: 'My Form 2 (works)',
      viewModel: {
        type: 'myview2'
      },
      items: [{
        xtype: 'radiogroup',
        vertical: true,
        columns: 1,
        bind: {
          value: '{activeItem}'
        },
        defaults: {
          name: 'myInput'
        },
        items: [{
          boxLabel: 'None',
          inputValue: '0'
        }, {
          boxLabel: 'Something',
          inputValue: '1'
        }]
      }, {
        xtype: 'container',
        layout: 'card',
        flex: 1,
        bind: {
          activeItem: '{activeCardLayout}'
        },
        items: [{
          xtype: 'container',
          layout: 'fit'
        }, {
          xtype: 'container',
          layout: 'fit',
          bind: {
            disabled: '{disableSomethingCard}'
          },
          items: [{
            xtype: 'textfield',
            fieldLabel: 'hello',
            allowBlank: false
          }]
        }]
      }]
    });
    Ext.create('MyForm', {
      renderTo: Ext.getBody()
    });
    Ext.create('MyForm2', {
      renderTo: Ext.getBody()
    });
  }
});