如何使用復選框創建自定義列表項？

Question

我創建了一個qooxdoo列表，其中包含復選框和標簽的自定義項。 我的問題是：當我選中該復選框時，它會變大，這給用戶帶來難看的體驗。 另外，當我檢查一些第一項並向下滾動時，我會看到許多已選中的項，默認情況下應取消選中它們。

這是某人可以粘貼到qooxdoo的代碼中：

 // Create a button var button1 = new qx.ui.form.Button("click to see list!", "icon/22/apps/internet-web-browser.png"); // Document is the application root var doc = this.getRoot(); // Add button to document at fixed coordinates doc.add(button1, { left : 100, top : 50 }); var popup; // Add an event listener button1.addListener("execute", function(e) { if (!popup) { popup = new myApp.list(); } popup.placeToWidget(button1); popup.show(); }); /* * class: list inside popup. */ qx.Class.define("myApp.list", { extend : qx.ui.popup.Popup, construct : function() { this.base(arguments); this.__createContent(); }, members : { __createContent : function(){ this.set({ layout : new qx.ui.layout.VBox(), minWidth : 300 }); //prepare data var zones = []; for (var i=0; i<100; i++){ zones.push({"LZN" : "ZONE " + i, "isChecked" : false}); } var lstFences = new qx.ui.list.List(); this.add(lstFences, {flex : 2}); var delegate = { createItem : function() { return new myApp.customListItem(); }, bindItem : function(controller, item, id) { controller.bindProperty("isChecked", "isChecked", null, item, id); controller.bindPropertyReverse("isChecked", "isChecked", null, item, id); controller.bindProperty("LZN", "LZN", null, item, id); } }; lstFences.setDelegate(delegate); lstFences.setModel(qx.data.marshal.Json.createModel(zones)); lstFences.setItemHeight(50); } } }) /** * The custom list item */ qx.Class.define("myApp.customListItem", { extend : qx.ui.core.Widget, properties : { LZN: { apply : "__applyLZN", nullable : true }, isChecked : { apply : "__applyChecked", event : "changeIsChecked", nullable : true } }, construct : function() { this.base(arguments); this.set({ padding : 5, decorator : new qx.ui.decoration.Decorator().set({ bottom : [1, "dashed","#BBBBBB"] }) }); this._setLayout(new qx.ui.layout.HBox().set({alignY : "middle"})); // create the widgets this._createChildControl(("isChecked")); this._createChildControl(("LZN")); }, members : { // overridden _createChildControlImpl : function(id) { var control; switch(id) { case "isChecked": control = new qx.ui.form.CheckBox(); control.set({ padding : 5, margin : 8, value : false, decorator : new qx.ui.decoration.Decorator().set({ width : 2, color : "orange", radius : 5 }) }); this._add(control); break; case "LZN": control = new qx.ui.basic.Label(); control.set({allowGrowX : true}); this._add(control, {flex : 2}); break; } return control || this.base(arguments, id); }, __applyLZN : function(value, old) { var label = this.getChildControl("LZN"); label.setValue(value); }, __applyChecked : function(value, old) { var checkBox = this.getChildControl("isChecked"); console.log(value, old); checkBox.setValue(value); } } }); 

Answer 1

這里有兩個問題：

第一個事實是，通過_createChildControlImpl將復選框創建為子_createChildControlImpl使復選框失去了外觀（就qooxdoo主題外觀而言），導致丟失了minWidth屬性，這使復選框在未選中時的寬度為0，在寬度時為0選中時需要顯示復選標記。 此處的解決方案是向myApp.customListItem類添加外觀，如下所示：

properties : { appearance: { refine : true, init : "mycustomlistitem" } }然后向主題中添加相應的外觀： appearances : { "mycustomlistitem" : "widget", "mycustomlistitem/isChecked" : "checkbox" }您可以還要在實例化外觀定義中的復選框（橙色裝飾器等）時添加您完成的所有樣式。

第二個問題是，您僅在自定義列表項的復選框子小部件與其“ isChecked”子小部件之間定義了一種單向綁定。 您需要在此處進行兩種方式的綁定，因此，如果屬性“ isChanged”的值更改了它的值，它將表示該屬性到復選框，反之亦然。

我通過動態創建丟失的外觀並在復選框和列表項“ isChecked”屬性之間創建雙向綁定來相應地修改了游樂場示例。 請注意，為簡單起見，我直接在應用程序根目錄中創建了列表：

https://gist.github.com/level420/4662ae2bc72318b91227ab68e0421f41