ExtJS6: Second instance of TreeStore has no grandchildren - extjs

Question

ExtJS6: Second instance of TreeStore has no grandchildren.
I have a class, MyStore, which inherits from TreeStore.
Then, I created an instance of MyStore to be displayed in a treepanel.
So far so good.
Then, I created another instance of MyStore to be displayed in another treepanel.
Here comes the problem: the second treepanel does not have grandchild. All it has are it's root node and it's root node's children.
How do I code this so that the 2nd (and succeeding) instance of TreeStore will have grandchildren?
https://fiddle.sencha.com/#fiddle/1ehq
Ext.define('MyStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
text: 'This is the root node',
children: [
{
text: 'Food',
expanded: true,
children: [
{
text: 'Cake',
leaf: true
},
{
text: 'Ice cream',
leaf: true
}
]
},
{
text: 'Toys',
expanded: true,
children: [
{
text: 'Ball',
leaf: true
},
{
text: 'Bat',
leaf: true
}
]
}
]
}
});
Ext.widget('treepanel',{
title: 'first tree panel',
renderTo: Ext.getBody(),
store: new MyStore()
});
Ext.widget('treepanel',{
title: 'second tree panel',
renderTo: Ext.getBody(),
store: new MyStore()
});
Ext.widget('panel', {
html: 'What happend to the "Food" and "Toys" of the second tree panel? Why did they loose their children?',
renderTo: Ext.getBody(),
});

Answer 1

Use this Fiddle:https://fiddle.sencha.com/#fiddle/1hti
Ext.define('MyStore',{
extend: 'Ext.data.TreeStore'
});
var store1 = Ext.create('MyStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
text: 'This is the root node',
children: [
{
text: 'Food',
expanded: true,
children: [
{
text: 'Cake',
leaf: true
},
{
text: 'Ice cream',
leaf: true
}
]
},
{
text: 'Toys',
expanded: true,
children: [
{
text: 'Ball',
leaf: true
},
{
text: 'Bat',
leaf: true
}
]
}
]
}
});
var store2 = Ext.create('MyStore',{
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
text: 'This is the root node',
children: [
{
text: 'Food',
expanded: true,
children: [
{
text: 'Cake',
leaf: true
},
{
text: 'Ice cream',
leaf: true
}
]
},
{
text: 'Toys',
expanded: true,
children: [
{
text: 'Ball',
leaf: true
},
{
text: 'Bat',
leaf: true
}
]
}
]
}
});
Ext.widget('treepanel',{
title: 'first tree panel',
renderTo: Ext.getBody(),
store: store1
});
Ext.widget('treepanel',{
title: 'second tree panel',
renderTo: Ext.getBody(),
store: store2
});
Ext.widget('panel', {
html: 'What happend to the "Food" and "Toys" of the second tree panel? Why did they loose their children?',
renderTo: Ext.getBody(),
});