I am creating TreeMap visualation in ExtJS. If the tree has following tree structure
Root has two children A & B, each A & B has two children AA,AAA, BB,BBB
Root
A
AA
AAA
B
BB
BB
Default behavior is when node A is expanded , it does not collapse the node B but i am looking the behavior when node A is expanded , B gets collapse and when node B is expanded, node A should collapse,
Ext.application({
name: 'fiddle',
launch: function () {
var SegTreeStore = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'GATE A 30',
value: 3,
expanded: false,
children: [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}]
}, {
text: 'Vision',
value: 40,
expanded: false,
children: [{
text: 'Kang',
value: 3,
leaf: true
}, {
text: 'Magneto',
value: 4,
leaf: true
}, {
text: 'Norman Osborn',
value: 5,
leaf: true
}, {
text: 'Anti-Vision',
value: 7,
leaf: true
}]
}, {
text: 'Ghost Rider',
value: 3,
expanded: false,
children: [{
text: 'Mephisto',
value: 1,
leaf: true
}]
}, {
text: 'Loki',
value: 2,
expanded: false,
children: [{
text: 'Captain America',
value: 3,
leaf: true
}, {
text: 'Deadpool',
value: 4,
leaf: true
}, {
text: 'Odin',
value: 5,
leaf: true
}, {
text: 'Scarlet Witch',
value: 2,
leaf: true
}, {
text: 'Silver Surfer',
value: 1,
leaf: true
}]
}, {
text: 'Daredevil',
value: 1,
expanded: false,
children: [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}]
}]
}
});
var SegTreeStore3 = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'Daredevil',
value: 1,
expanded: false,
children: [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}]
}]
}
});
var SegTreeStore2 = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'GATE A 30',
value: 3,
expanded: true,
children: [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}]
}]
}
});
var SegTreeStore1 = Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children: [{
text: 'Vision',
value: 40,
expanded: false,
children: [{
text: 'Kang',
value: 10,
leaf: true
}, {
text: 'Magneto',
value: 12,
leaf: true
}, {
text: 'Norman Osborn',
value: 12,
leaf: true
}, {
text: 'Anti-Vision',
value: 17,
leaf: true
}]
}]
}
});
function createSegTreeStore3(originalStore,selectedNodeText,selectedNodeIsExpanded) {
// Find the 'Daredevil' node in the original store
var daredevilNode = null;
originalStore.getRootNode().eachChild(function (child) {
if (child.get('text') === selectedNodeText) {
daredevilNode = child.copy(undefined,true); // Make a copy of the node
//daredevilNode.data.expanded = selectedNodeIsExpanded;
return false; // Stop the loop
}
});
if (daredevilNode) {
// Create the new store with the 'Daredevil' node
return Ext.create('Ext.data.TreeStore', {
type: 'tree',
root: {
expanded: true,
children:[{
text: daredevilNode.get('text'),
value: daredevilNode.get('value'),
expanded: daredevilNode.get('expanded'),
children: Ext.clone(daredevilNode.get('children'))
}]
//children: [daredevilNode.data]
//children : Ext.clone(daredevilNode.data)
}
});
}
return null;
}
function updateValues(node, selectedNodeText) {
if (node.text !== selectedNodeText) {
node.value = 0;
}
if (node.children) {
node.children.forEach(child => updateValues(child, selectedNodeText));
}
}
function updateNodeValues(node, newValue, selectedNodeText, selectedNodeDepth) {
console.log(node);
if (node.text != selectedNodeText && node.depth == selectedNodeDepth) {
node.value = 0;
}
if (node.children) {
node.children.forEach(child => updateNodeValues(child, newValue, selectedNodeText, selectedNodeDepth));
}
//node.value = newValue;
}
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'TreeMap Chart',
id: 'Test_TreeMap',
height: 750,
width: 750,
layout: 'fit',
items: [{
xtype: 'd3-treemap',
//autoLoad: true,
nodeValue: function (record) {
// The value in your data to derive the size of the tile from.
return record.get('value');
},
store: SegTreeStore,
listeners: {
element: 'element',
dblclick: function (event, target) {
var tempTreeStore = SegTreeStore;
console.log(tempTreeStore);
console.log(target.__data__.data.data.text);
var selectedNodeText = target.__data__.data.data.text;
var selectedNodeIsExpanded = target.__data__.data.data.expanded;
var selectedNodeDepth = target.__data__.data.data.depth;
var textToChildrenMap = {
"Root": [{
text: 'GATE A 30',
value: 5,
expanded: true,
children: [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}]
}, {
text: 'Vision',
value: 4,
expanded: false,
children: [{
text: 'Kang',
value: 4,
leaf: true
}, {
text: 'Magneto',
value: 3,
leaf: true
}, {
text: 'Norman Osborn',
value: 2,
leaf: true
}, {
text: 'Anti-Vision',
value: 1,
leaf: true
}]
}, {
text: 'Ghost Rider',
value: 3,
expanded: false,
children: [{
text: 'Mephisto',
value: 1,
leaf: true
}]
}, {
text: 'Loki',
value: 2,
expanded: false,
children: [{
text: 'Captain America',
value: 3,
leaf: true
}, {
text: 'Deadpool',
value: 4,
leaf: true
}, {
text: 'Odin',
value: 5,
leaf: true
}, {
text: 'Scarlet Witch',
value: 2,
leaf: true
}, {
text: 'Silver Surfer',
value: 1,
leaf: true
}]
}, {
text: 'Daredevil',
value: 1,
expanded: false,
children: [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}]
}],
"GATE A 30": [{
text: 'The Leader',
value: 3,
expanded: false,
children: [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
}, {
text: 'Abomination',
value: 2,
leaf: true
}, {
text: 'Sandman',
value: 1,
leaf: true
}],
"Vision": [{
text: 'Kang',
value: 4,
leaf: true
}, {
text: 'Magneto',
value: 3,
leaf: true
}, {
text: 'Norman Osborn',
value: 2,
leaf: true
}, {
text: 'Anti-Vision',
value: 1,
leaf: true
}],
"Ghost Rider": [{
text: 'Mephisto',
value: 1,
leaf: true
}],
"Loki": [{
text: 'Captain America',
value: 3,
leaf: true
}, {
text: 'Deadpool',
value: 4,
leaf: true
}, {
text: 'Odin',
value: 5,
leaf: true
}, {
text: 'Scarlet Witch',
value: 2,
leaf: true
}, {
text: 'Silver Surfer',
value: 1,
leaf: true
}],
"Daredevil": [{
text: 'Purple Man',
value: 4,
leaf: true
}, {
text: 'Kingpin',
value: 3,
leaf: true
}, {
text: 'Namor',
value: 2,
leaf: true
}, {
text: 'Sabretooth',
value: 1,
leaf: true
}],
"The Leader": [{
text: 'The 2nd Leader',
value: 1,
leaf: true
}]
};
// Update values in the entire tree
var SegTreeStore5 = createSegTreeStore3(this.component.getStore(),selectedNodeText,selectedNodeIsExpanded);
console.log("Filtering daredevils !!!!");
console.log(SegTreeStore5);
console.log(SegTreeStore);
console.log(SegTreeStore1);
console.log(SegTreeStore2);
console.log(SegTreeStore3);
//console.log(SegTreeStore4);
if (selectedNodeText == "Root"){
this.component.setStore(SegTreeStore);
}else{
this.component.setStore(SegTreeStore5);
}
/*if (selectedNodeText == "Vision") {
this.component.setStore(SegTreeStore1);
} else if (selectedNodeText == "Daredevil") {
this.component.setStore(SegTreeStore3);
} else if ((selectedNodeText == "GATE A 30")) {
this.component.setStore(SegTreeStore2);
} else {
this.component.setStore(SegTreeStore)
}*/
}
}
}]
});
}
});