title: qooxdoo - custom listitem widget selection
body: <p>I made custom listitem view (based on <a href="http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4" rel="nofollow">http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4</a>).</p>
  
  <p>I have problem with selection items on this list. There is always selected first element (no matter which element on list I will click).</p>
  
  <p>What should I do to resolve my problem?</p>
  
  <p>Here is my list-item widget:</p>
  
  <pre>
  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,
                      column : 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() {
  
      }
  
  });
  </pre>
  
  <p>... and here how I use it:</p>
  
  <pre>
  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);
      }
  });
  </pre>