javascript - 在qooxdoo中自定义virtualTree不能按预期工作

我正在使用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);

最佳答案

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

虚拟窗口小部件意味着您能够显示大量数据，只有几个窗口小部件可显示可见内容。想象一棵有数百个节点和子节点的树，但是一次只能看到10个节点。然后，虚拟窗口小部件根据需要实例化许多实际的窗口小部件，并重新使用这些窗口小部件以显示树的可见部分。

虚拟树窗口小部件将树的叶子显示在节点上，它通过更改窗口小部件的模型及其外观来重用实例化的窗口小部件。这样一来，在用户交互时，可能会出现一个虚拟树节点，该树节点由一个显示了叶子的项目渲染。

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

为了实现所需的功能，必须将逻辑添加到configureItem委托成员中，该委托成员仅在树项窗口小部件实例化时调用一次。您必须在其中区分当前显示节点或叶子的项目，只需通过item.getAppearance()获取该项目的当前外观即可完成。对于叶子，结果将为virtual-tree-file，对于节点将为virtual-tree-folder。

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

请注意，所有这些最好由自定义外观主题来处理，在该主题中，除了带有标签淡入淡出的标签子控件的动画之外，您还可以添加基于悬停之类的小部件状态使用的大多数样式。

请将以下要点粘贴到qooxdoo操场上，我在其中创建了一个示例，演示了上面的所有演讲：

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

关于javascript - 在qooxdoo中自定义virtualTree不能按预期工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44908254/