Question

我创建了一个qooxdoo列表，其中包含复选框和标签的自定义项。我的问题是：当我选中该复选框时，它会变大，这给用户带来难看的体验。另外，当我检查一些第一项并向下滚动时，我会看到许多已选中的项目，默认情况下应取消选中这些项目。

这是某人可以粘贴到play ground for 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将复选框创建为子小部件，使得复选框失去了外观（就qooxdoo主题外观而言），导致丢失了minWidth属性，这使得复选框，未选中时的宽度为0，并且在选中时显示其选中标记所需的宽度。此处的解决方案是像这样在myApp.customListItem类中添加外观：

properties : { appearance: { refine : true, init : "mycustomlistitem" } } 然后为您的主题添加相应的外观： appearances : { "mycustomlistitem" : "widget", "mycustomlistitem/isChecked" : "checkbox" } 您还可以添加在实例化外观定义中的复选框（橙色装饰器等）时所做的所有样式。

第二个问题是，您仅在自定义列表项的复选框子小部件及其“ isChecked”子小部件之间定义了一种单向绑定。您需要在此处进行两种方式的绑定，因此，如果属性“ isChanged”的值更改了它的值，则会将其复制到复选框中，反之亦然。

我通过动态创建丢失的外观并在复选框和列表项“ isChecked”属性之间创建双向绑定来相应地修改了游乐场示例。请注意，为简单起见，我直接在应用程序根目录中创建了列表：

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

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

1 个答案: