2010-12-20 68 views
4

我做了自定義listitem視圖(基於http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4)。qooxdoo - 自定義listitem部件選擇

我對此列表上的選擇項目有問題。總是選擇第一個元素(不管列表中的哪個元素將點擊)。

我該怎麼辦才能解決我的問題?

這裏是我的列表項控件:

 
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() { 

    } 

}); 

...這裏我如何使用它:

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

回答

5

貌似問題是在bindItem功能。只要你提供你自己的bindItem函數,所有默認的綁定屬性就不再受約束了。這意味着標籤,圖標和模型不再同步。我沒有嘗試過你的代碼,但我想用一個簡單的模型綁定,問題就會消失。

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

這是必要的情況下你想要的東西在你的模型屬性,並與不同的,在你選擇的例子。這條代碼只是將整個對象用作模型,在大多數情況下這是一個好主意。

最好, 馬丁

+0

謝謝 - 這是有效的。 – tchudyk 2010-12-21 18:41:44