Qooxdoo表单添加表格组件报错：Added widget not supported

问题原因 #

Qooxdoo的qx.ui.form.Form仅接受实现了qx.ui.form.IForm接口的控件，而qx.ui.table.Table并未实现该接口，直接添加就会抛出Added widget not supported错误。

解决方案 #

需要将表格包装在一个实现了qx.ui.form.IForm接口的自定义组件中，让表单能够识别并处理这个控件。

步骤1：实现自定义表单表格组件 #

qx.Class.define("my.custom.FormTable", {
  extend: qx.ui.container.Composite,
  implement: [qx.ui.form.IForm],
  
  construct: function(tableModel) {
    this.base(arguments, new qx.ui.layout.VBox());
    
    // 初始化表格
    this.__table = new qx.ui.table.Table(tableModel);
    this.add(this.__table, {flex: 1});
  },
  
  members: {
    __table: null,
    
    // 获取表格数据（IForm接口必填）
    getValue: function() {
      const model = this.__table.getTableModel();
      const rowCount = model.getRowCount();
      const data = [];
      for (let i = 0; i < rowCount; i++) {
        data.push(model.getRowData(i));
      }
      return data;
    },
    
    // 设置表格数据（IForm接口必填）
    setValue: function(data) {
      this.__table.getTableModel().setData(data);
    },
    
    // 重置表格（IForm接口必填）
    reset: function() {
      this.__table.getTableModel().setData([]);
    },
    
    // 以下为IForm接口的可选实现，按需调整
    getValid: function() {
      return true;
    },
    
    getRequired: function() {
      return false;
    },
    
    setRequired: function(required) {
      // 可添加必填状态的UI逻辑
    },
    
    getInvalidMessage: function() {
      return "";
    },
    
    setInvalidMessage: function(message) {
      // 可添加错误提示逻辑
    },
    
    validate: function() {
      return true;
    }
  },
  
  destruct: function() {
    this.__table.dispose();
    this.__table = null;
  }
});

步骤2：在表单中使用自定义组件 #

替换原来的表格添加代码，改用自定义组件：

// ...
const tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(["ID", "A number"]);
tableModel.setData([[1, 12.23],[3, 849759438750],[2, -2]]);

// 实例化自定义表单表格
const formTable = new my.custom.FormTable(tableModel);
// 添加到表单中
this.__form.add(formTable, parameter.name, undefined, parameter.label);

处理后，表单就能正常识别表格控件，还能通过this.__form.getValues()获取表格数据，通过this.__form.setValues()设置表格内容。

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