将属性绑定到自定义列表项目

Question

我创建了一个自定义ListItem，它具有一些ChildWidgets。其中一个是Combobox Widget。

我想通过控制器设置模型，为此我使用了qx.data.controller.List。

使用bindItem和controller.bindProperty("", "model", null, item, index);我将我的模型绑定到列表。

我的问题是，我的模型（text）中有一个属性应该绑定到Combobox值属性。

我试过controller.bindProperty("text", "value", null, item.getChildControl("combobox"), index);但我没有得到它的工作。

我在做什么错？

Answer 1

下面是最终回答你的问题，其中包括删除项的能力：

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