Qooxdoo - select a custom list of items

Question

I made my own listitem view (based on http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4 ).

I have a problem with select items in this list. The first item is always selected (no matter which item in the list I click).

What should I do to solve my problem?

Here is my list item widget:

 qx.Class.define ("project.MyView", {extend: qx.ui.core.Widget, include: [qx.ui.form.MModelProperty], construct: function () {this.base (arguments); var layout = new qx.ui.layout.Grid (4, 2); layout.setColumnFlex (1, 1); this._setLayout (layout); this._createChildControl ("icon"); this._createChildControl ("date"); this ._createChildControl ("description");}, properties: {appearance: {refine: true, init: "listitem"}, icon: {check: "String", apply: "_applyIcon", nullable: true}, date: { check: "String", apply: "_applyDate", nullable: true}, description: {check: "String", apply: "_applyDescription", nullable: true}}, members: {_createChildControlImpl: function (id) {var control ; switch (id) {case "icon": control = new qx.ui.basic.Image (this.getIcon ()); control.setAnonymous (true); this._add (control, {row: 0, column: 0 , rowSpan: 2}); break; case "date": control = new qx.ui.basic.Label (this.getDate ()); control.setAnonymous (true); this._add (control, {row: 0, co  lumn: 2});  break;  case "description": control = new qx.ui.basic.Label (this.getDescription ());  control.setAnonymous (true);  control.setRich (true);  this._add (control, {row: 0, column: 1});  break;  } return control ||  this.base (arguments, id);  }, _applyIcon: function (value, old) {var icon = this.getChildControl ("icon");  icon.setSource (value);  }, _applyDescription: function (value, old) {var description = this.getChildControl ("description");  description.setValue (value);  }, _applyDate: function (value, old) {var date = this.getChildControl ("date");  date.setValue (value);  }}, destruct: function () {}}); 

... and this is how I use it:

  this.list = new qx.ui.form.List ();
 this.listController = new qx.data.controller.List (null, this.list);
 this.listController.setDelegate ({
     createItem: function () {
         return new project.MyView ();
     },

     bindItem: function (controller, item, id) {
         controller.bindProperty ("description", "description", null, item, id);
         controller.bindProperty ("icon", "icon", null, item, id);
         controller.bindProperty ("date", "date", null, item, id);
     },

     configureItem: function (item) {
         item.getChildControl ("icon"). setWidth (48);
         item.getChildControl ("icon"). setHeight (48);
         item.getChildControl ("icon"). setScale (true);
         item.setMinHeight (52);
     }
 });

Answer 1

Looks like a problem in the bindItem function. Once you provide your own bindItem function, all default binding properties are no longer bound. This means that the lable, icon and model are no longer in sync. I havent tried you code, but I assume that with a simple model binding, the problem goes away.

controller.bindProperty("", "model", null, item, id); 

This is necessary if you want something different in the property of the model and with this, for example, in your choice. This line of code simply uses the whole object as a model, which in most cases is a good idea.

Best, Martin