CODEWITHSUNDEEP
qooxdoo
Chris
Chris

Reputation: 3405

Qooxdoo use a table in a Form

I've got in my class a Form

this.__form = new qx.ui.form.Form();

and want that one of its entries of this form is a simple table (extendable list with two columns, think of key value pairs)

But trying

// ...
const tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(["ID", "A number"]);
tableModel.setData([[1, 12.23],[3, 849759438750],[2, -2]]);
const input = new qx.ui.table.Table(tableModel);
this.__form.add(input, parameter.name, undefined, parameter.label);

is failing with Uncaught Error: Added widget not supported.

Upvotes: 1

Views: 143

Answers (2)

Chris Eskew
Chris Eskew

Reputation: 111

The control you pass has to also implement qx.ui.form.IField because the qx.ui.form.Form object adds the control to it's internal qx.ui.form.Resetter object. The Resetter object only accepts objects that implement qx.ui.form.IField interface, and there's no way, out of the box, to bypass it. Also, your control needs to implement the IForm interface. The easiest means to do that is to include the qx.ui.form.MForm mixin and the "value" event, property and apply method. Below is a minimally working example:

qx.Class.define("testapp.ButtonGroup", {
extend: qx.ui.container.Composite,
implement: [qx.ui.form.IForm, qx.ui.form.IField],
include: [qx.ui.form.MForm],

construct() {
    super();
},

events: {
    changeValue: "qx.event.type.Data"
},

properties: {    
    value: {
      nullable: true,
      event: "changeValue",
      apply: "_applyValue"
    }
},

members: {
    // property apply
    _applyValue(value, old) {}
}});

Upvotes: 1

goldim
goldim

Reputation: 460

You can't add a qooxdoo table to the Form object. You have to pass only controls which implement qx.ui.form.IForm. If you don't find any needed control you may create your custom but implementing the interface. Another way is to use Edit Factory which will transform your table model data into controls. You can see it here in js code https://qooxdoo.org/qxl.demobrowser/#table~Table_Cell_Editor.html .

Upvotes: 0

Related Questions