如何在Ext.js中实现自定义对象配置的绑定？

要让你的自定义fileedit组件的配置项支持ViewModel绑定，需要在组件类中完成以下几步：

• 声明可绑定的配置项
  在自定义组件的类定义中，通过config块将需要绑定的配置项标记为bindable: true，这是Ext识别可绑定配置的关键。示例代码：

  Ext.define('YourApp.view.field.FileEdit', {
      extend: 'Ext.form.field.Base',
      xtype: 'fileedit',
  
      config: {
          // 配置默认值
          canDownload: true,
          canShowFileName: true,
          canClearImg: true,
          canSendFile: true,
          // 标记这些配置支持绑定
          bindable: {
              canDownload: true,
              canShowFileName: true,
              canClearImg: true,
              canSendFile: true
          }
      },
  

  也可以为每个配置单独设置bindable：

  config: {
      canDownload: {
          value: true,
          bindable: true
      },
      canShowFileName: {
          value: true,
          bindable: true
      },
      // 其余配置同理
  }
  

• 配置变更时同步子组件状态
  使用Ext的标准update[ConfigName]方法，在配置项值变化时自动更新对应子组件的可见性。示例：

  updateCanDownload: function(newValue) {
          // 替换为你实际获取下载按钮的方式，比如通过itemId
          const downloadBtn = this.down('#downloadBtn');
          if (downloadBtn) downloadBtn.setVisible(newValue);
      },
  
      updateCanShowFileName: function(newValue) {
          const fileNameEl = this.down('#fileNameDisplay');
          if (fileNameEl) fileNameEl.setVisible(newValue);
      },
  
      updateCanClearImg: function(newValue) {
          const clearBtn = this.down('#clearImgBtn');
          if (clearBtn) clearBtn.setVisible(newValue);
      },
  
      updateCanSendFile: function(newValue) {
          const sendBtn = this.down('#sendFileBtn');
          if (sendBtn) sendBtn.setVisible(newValue);
      },
  

• 初始化时应用配置
  在initComponent方法中调用上述update方法，确保组件初始化时就根据配置设置子组件的初始可见性：

  initComponent: function() {
          this.callParent(arguments);
          // 初始化时同步配置到子组件
          this.updateCanDownload(this.getCanDownload());
          this.updateCanShowFileName(this.getCanShowFileName());
          this.updateCanClearImg(this.getCanClearImg());
          this.updateCanSendFile(this.getCanSendFile());
      }
  });
  

完成以上修改后，你现在写的bind配置就能正常工作了——ViewModel中的属性变化会自动同步到组件的自定义配置，进而触发子组件可见性的更新。

内容的提问来源于stack exchange，提问作者Guilherme Goncalves