qooxdoo - benutzerdefinierte Liste Widget-Auswahl

Question

Ich machte benutzerdefinierte Listenansicht (basierend auf http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4).

Ich habe ein Problem mit den Auswahlelementen in dieser Liste. Es wird immer das erste Element ausgewählt (egal auf welches Element in der Liste ich klicke).

Was soll ich tun, um mein Problem zu lösen?

Hier ist mein 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, 
        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() { 

    } 

}); 

... und hier, wie ich es verwenden:

 
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

sieht aus wie das Problem in der bindItem Funktion ist. Sobald Sie Ihre eigene bindItem-Funktion angeben, sind alle standardmäßigen gebundenen Eigenschaften nicht mehr gebunden. Das bedeutet, dass Label, Symbol und Modell nicht mehr synchron sind. Ich habe nicht versucht, Sie Code, aber ich denke, mit einer einfachen Bindung des Modells, wird das Problem weg sein.

Dies ist notwendig, wenn Sie etwas anderes in Ihrer Modelleigenschaft und damit in Ihrer Auswahl zum Beispiel möchten. Diese Codezeile verwendet nur das gesamte Objekt als Modell, was in den meisten Fällen eine gute Idee ist.

Beste, Martin