2017-02-14 54 views
1

我創建了一個自定義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);但我沒有得到它的工作。

我在做什麼錯?

+0

請您可以創建演示如何使用您的問題http://www.qooxdoo.org/current操場例子/操場/?這使得其他人可以快速查看確切的問題並演示特定於代碼的修復。 – johnspackman

+0

我試圖建立一個,但我沒有得到它的工作。無論如何,我希望你能看到我想要達到的目標。 tinyurl.com/jjybff7 –

+0

我改變了一下。我想使用自己的屬性,而不僅僅是模型屬性,所以我可以聽取更改事件。我也想收聽控制器的changeSelection事件。這工作,但我在監聽器中的數據總是'空'。這裏是更新的遊樂場:tinyurl.com/zynyyhq –

回答

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

不知道我是否應該打開一個現在的線程,但上下文是一樣的。是否可以設置Listitem選擇,如果我點擊組合框? –

+0

這是一個類似的東西 - 你改變控制器的'selected'屬性(它是'qx.data.Array'的一個實例)以包含模型項目,控制器將更新UI。實際上,如果你有'CustomListItem'實例並修改'qx.ui.form.List。選擇'屬性來包含它,那麼控制器也會確保它的'selected'屬性更新了正確的模型,所以它是雙向的 – johnspackman

相關問題