1
Ich verwende Qooxdoo, um ein benutzerdefiniertes virtualTree zu erstellen, das wie erwartet funktioniert, bis ich einen Knoten öffne/schließe/öffne. Es ist dann ein Durcheinander. Ich weiß nicht, welchen Teil ich vermisse.Anpassen von VirtualTree in Qooxdoo funktioniert nicht wie erwartet
hier ist ein Codebeispiel: virtual tree
zu reproduzieren, öffnen Sie bitte einen Knoten (zum Beispiel "DEP1"). Sie können Kinder schweben und alles ist in Ordnung. Schließen Sie jetzt den Knoten und öffnen Sie ihn erneut. Jetzt werden die Symbole im Knoten geändert und der Knoten erhält den Hover-Effekt, was beim ersten Öffnen nicht der Fall ist.
Fehle ich etwas?
Grüße
Code unten:
var data = {
\t "label": "ROOT",
\t
\t "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({
\t showTopLevelOpenCloseIcons : true,
\t hideRoot : true,
\t backgroundColor : "gray"
});
\t \t \t
/* label options */
vtree.setLabelOptions({
converter : function(value, model)
{
\t if (value){
\t \t return "<b>" + model.get("LDEP") + "</b>";
\t }
\t else
\t {
\t \t return model.get("LVEH");
\t }
}
});
\t \t \t
/*
* icon options, if a dep then return a generic symbol else return
* vehicle icon
*/
vtree.setIconPath("children");
vtree.setIconOptions({
converter : function(value, model)
{
\t if (value){
\t \t return "icon/22/mimetypes/text-html.png";
\t }
\t else
\t {
\t \t return "icon/22/mimetypes/media-image.png"
\t }
}
});
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){
\t //dept
\t item.setBackgroundColor("gray");
} else {
\t //vehicle
\t item.setBackgroundColor("white");
\t icon.set({
\t \t width \t : 32,
\t \t height \t : 32,
\t \t scale \t : true,
\t \t marginTop : -4
\t });
}
//labels, accept html
var lbl = item.getChildControl("label");
lbl.set({
\t rich : true,
\t textColor : "black"
});
//change color on pointerin and pointerout of vehicles
if (!item.getModel().getChildren){
\t item.addListener("pointerover", function(){
\t \t item.getChildControl("label").fadeIn(100);
\t \t item.setBackgroundColor("blue");
\t \t item.getChildControl("label").setTextColor("orange");
\t });
\t
\t item.addListener("pointerout", function(){
\t \t item.setBackgroundColor("white");
\t \t item.getChildControl("label").setTextColor("black");
\t });
}
},
/*
* sorting
*/
sorter : function(a, b){
\t var A = (a.getChildren? a.get("LDEP") : a.get("LVEH")).toUpperCase(),
\t \t B = (b.getChildren? b.get("LDEP") : b.get("LVEH")).toUpperCase();
\t \t
\t return A > B ? 1 : A < B ? -1 : 0;
}
};
vtree.setDelegate(delegate);
danken Ihnen sehr, zuerst für die lange und klare Erklärung, die zweite für das Beispiel, das wie ein Zauber wirkt. BTW Ich habe angefangen, configureItem zu schreiben, war mir aber nicht ganz sicher, ob es der richtige Weg ist, also habe ich nach Tagen der Tests beschlossen, hier zu posten. Mit Themen zu arbeiten ist eine andere Geschichte, ich bin begierig darauf, es zu lernen, hatte aber immer noch nicht genug Zeit, um sich damit zu beschäftigen. Nochmals vielen Dank. – Salih