Bind Property to Custom List Item - qooxdoo

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
});