如何使用复选框创建自定义列表项？

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