Question

我正在使用qooxdoo构建一个自定义的virtualTree，它可以正常工作，直到我打开/关闭/重新打开一个节点。那是一团糟。我不知道我错过了哪一部分。

这是一个代码示例： virtual tree

要重现，请打开一个节点（例如“Dep1”）。你可以徘徊儿童，一切都很好。现在关闭节点并重新打开它。现在，图标在节点中被更改，节点接收到悬停效果，而我们最初打开时则不是这种情况。

我错过了什么吗？

此致

以下代码：

var data = {
	"label": "ROOT",
	
	"children" : [
    {
      "LDEP" : "Dep1",
      "children" : [
        {
          "CVEH" : 1,
          "LVEH" : "veh1_1"
        },
        {
          "CVEH" : 2,
          "LVEH" : "veh1_2"
        }
      ]
    },
    
    {
      "LDEP" : "Dep2",
      "children" : [
        {
          "CVEH" : 3,
          "LVEH" : "veh2_1"
        },
        {
          "CVEH" : 4,
          "LVEH" : "veh2_2"
        }
      ]
    },
    
  ]
  
};
var model = qx.data.marshal.Json.createModel(data, false);
var vtree = new qx.ui.tree.VirtualTree(model, "children", "children");

this.getRoot().add(vtree,
{
  left : 100,
  right : 100,
  top  : 50
});

vtree.set({
	showTopLevelOpenCloseIcons : true,
	hideRoot : true,
	backgroundColor : "gray"
});
			
/* label options */
vtree.setLabelOptions({
    converter : function(value, model)
    {
    	if (value){ 
    		return  "<b>" + model.get("LDEP") + "</b>";
    	}
    	else
    	{ 
    		return model.get("LVEH");
    	}
    }
});
			    

/* 
 * icon options, if a dep then return a generic symbol else return 
 * vehicle icon
 */
vtree.setIconPath("children");
vtree.setIconOptions({
  converter : function(value, model)
  {
  	if (value){
  		return "icon/22/mimetypes/text-html.png";
  	}
  	else
  	{ 
  		return "icon/22/mimetypes/media-image.png"
  	}
  }
});


var delegate = {
    bindItem : function(controller, item, index)
    {
      controller.bindDefaultProperties(item, index);
      
      //set icon size to 24x24 for leaves
      var icon = item.getChildControl("icon");
      if(item.getModel().getChildren){
      	//dept
      	item.setBackgroundColor("gray");
      } else {
      	//vehicle
      	item.setBackgroundColor("white");
      	icon.set({
      		width 	: 32,
      		height 	: 32,
      		scale	: true,
      		marginTop : -4
      	});
      }
  
      //labels, accept html
      var lbl = item.getChildControl("label");
      lbl.set({
      	rich : true,
      	textColor : "black"
      });
  
      //change color on pointerin and pointerout of vehicles
      if (!item.getModel().getChildren){
    	  item.addListener("pointerover", function(){
    	  	item.getChildControl("label").fadeIn(100);
    	  	item.setBackgroundColor("blue");
    	  	item.getChildControl("label").setTextColor("orange");
    	  });
    	  
    	  item.addListener("pointerout", function(){
    	  	item.setBackgroundColor("white");
    	  	item.getChildControl("label").setTextColor("black");
    	  });
      }
    },
    
    /* 
     * sorting
     */ 
    sorter : function(a, b){
    	var A = (a.getChildren? a.get("LDEP") : a.get("LVEH")).toUpperCase(), 
    		  B = (b.getChildren? b.get("LDEP") : b.get("LVEH")).toUpperCase(); 
    		
    	return A > B ? 1 : A < B ? -1 : 0; 
    }
};
  
vtree.setDelegate(delegate);

Answer 1

要了解您正在观察的效果，需要了解虚拟小部件在qooxdoo中的工作方式。

虚拟小部件意味着您可以显示大量数据，只有少量小部件呈现可见内容。想象一下，有一个包含数百个节点和子节点的树，但您一次只能看到10个节点。虚拟小部件然后根据需要实例化任意数量的小部件，并重新使用这些小部件来显示树的可见部分。

虚拟树窗口小部件，通过更改窗口小部件的模型及其外观，重新映射节点树的叶子，重用实例化的窗口小部件。这种方式可能发生在用户交互时，虚拟树节点由一个物品呈现，该物品可以显示一个叶子。

所有这一切都是通过委托bindItem成员函数完成的，每次真正的窗口小部件被重新用于虚拟项目时都会调用它。因此，在bindItem中添加事件侦听器会将后续越来越多的事件侦听器添加到单个窗口小部件树/叶实例中，从而显示您描述的效果。

要实现您想要的功能，您必须将您的逻辑添加到configureItem委托成员中，该成员仅在实例化树项目窗口小部件时调用一次。在那里，你必须区分当前显示节点的项目或叶子，你可以通过item.getAppearance()获取该项目的当前外观来完成。结果将是叶子的virtual-tree-file和节点的virtual-tree-folder。

为pointerover和pointerout添加的事件侦听器应根据外观添加所需的样式。

请注意，所有这些最好由自定义外观主题进行处理，您可以根据窗口小部件状态（如悬停）添加您使用的大多数样式，此外还有标签子控件的动画以及标签中的淡入淡出。

请将以下要点粘贴到qooxdoo游乐场，在那里我创建了一个示例，演示了上述所有演讲：

https://gist.github.com/level420/ba4e25f98618064f91f5aa6cb6bb1124

在qooxdoo中自定义virtualTree无法按预期工作

1 个答案: