Bind Property to Custom List Item

Question

I created a Custom ListItem, which has some ChildWidgets. One of these is a Combobox Widget.

I want to set the Model by a Controller, for this I used qx.data.controller.List.

With the bindItem and controller.bindProperty("", "model", null, item, index); I bind my Model to the List.

My Problem is, that I have one Property in my Model (text) which should be binded to the Combobox Value Property.

I tried controller.bindProperty("text", "value", null, item.getChildControl("combobox"), index); but I didn't get it to work.

What am I doing wrong?

Answer 1

Here's the final answer to your question, including the ability to delete items:

qx.Class.define("CustomListItem", {
    extend: qx.ui.core.Widget,
    include: [qx.ui.form.MModelProperty],

    properties: {
        isDistribution: {
            init: true,
            check: "Boolean",
            event: "distributionChange"
        },
        isFilter: {
            init: false,
            check: "Boolean",
            event: "symbolEvent"
        },
        isColumn: {
            init: false,
            check: "Boolean",
            event: "symbolEvent"
        },
        isRow: {
            init: false,
            check: "Boolean",
            event: "changeRow"
        },
        isFilterPatientCases: {
            init: true,
            check: "Boolean",
            event: "symbolEvent"
        },
        isShow: {
            init: true,
            check: "Boolean",
            event: "symbolEvent"
        },
        isUnkownFilter: {
            init: true,
            check: "Boolean",
            event: "symbolEvent"
        },
        value: {
            init: "",
            event: "changeValue"
        }
    },

    members: {
        _createChildControlImpl: function(id) {
            var control;

            switch (id) {
                case "alertimage":
                    control = new qx.ui.basic.Image();
                    control.setWidth(16);
                    this._add(control);
                    break;
                case "suchecombobox":
                    control = new qx.ui.form.ComboBox();
                    this._add(control, {
                        flex: 1
                    });
                    break;
                case "deletebutton":
                    control = new qx.ui.form.Button("Del");
                    control.setMaxWidth(40);
                    this._add(control);
                    break;
                case "imagecomposite":
                    control = new qx.ui.container.Composite(new qx.ui.layout.HBox(0));
                    this._add(control);
                    break;
            }

            return control || this.base(arguments, id);
        }
    },

    construct: function() {
        this.base(arguments);

        this._setLayout(new qx.ui.layout.HBox(0));

        this._showImage = new qx.ui.basic.Image();
        this._showImage.setMaxHeight(25);
        this._showImage.setMaxWidth(25);
        this._showImage.setScale(true);

        this._filterImage = new qx.ui.basic.Image();
        this._filterImage.setMaxHeight(25);
        this._filterImage.setMaxWidth(25);
        this._filterImage.setScale(true);

        this._createChildControl("alertimage");
        this._createChildControl("suchecombobox");
        this._createChildControl("imagecomposite");
        this._createChildControl("deletebutton");

        this.getChildControl("deletebutton").addListener("execute", function(e) {
            var itemModel = this.getModel();
            data.remove(itemModel);
        }, this);

    }

});

var dataRaw = {
    isColumn: false,
    isFilter: false,
    isFilterPatientCases: true,
    isRow: true,
    isShow: true,
    isUnkownFilter: true,
    position: "row",
    queryText: "Dia:I50_:_Herzinsuffizienz",
    textType: ""

};
var data = qx.data.marshal.Json.createModel([dataRaw]);

var list = new qx.ui.form.List();
list.setWidth(200);
var listController = new qx.data.controller.List(null, list);

listController.setDelegate({
    bindItem: function(controller, item, index) {
        controller.bindProperty("", "model", null, item, index);
        controller.bindProperty("queryText", "value", null, item.getChildControl("suchecombobox"), index);
        controller.bindProperty("isFilter", "isFilter", null, item, index);
        controller.bindProperty("isColumn", "isColumn", null, item, index);
        controller.bindProperty("isRow", "isRow", null, item, index);
        controller.bindProperty("isFilterPatientCases", "isFilterPatientCases", null, item, index);
        controller.bindProperty("isShow", "isShow", null, item, index);
        controller.bindProperty("isUnkownFilter", "isUnkownFilter", null, item, index);
        controller.bindProperty("queryText", "value", null, item, index);


    },
    createItem: function() {
        return new CustomListItem();
    }
});

listController.setModel(data);

listController.addListener("changeSelection", function(e) {
    console.log(e.getData().toArray());
}, this);

var doc = this.getRoot();

var button = new qx.ui.form.Button("AddItem");
var newIndex = 1;
button.addListener("execute", function(e) {
    dataRaw.queryText = "New (" + (newIndex++) + ")";
    data.append(qx.data.marshal.Json.createModel([dataRaw]));
}, this);

doc.add(list, {
    left: 0,
    top: 0
});

doc.add(button, {
    left: 200,
    top: 0
});