ExtJS6：TreeStore的第二个实例没有孙子。

Question

ExtJS6：TreeStore的第二个实例没有孙子。

我有一个类MyStore，它继承自TreeStore。 然后，我创建了一个MyStore的实例以显示在treepanel中。 目前为止这么好。 然后，我创建了另一个MyStore实例，以便在另一个treepanel中显示。 问题来了：第二个treepanel没有孙子。它只有它的根节点，它是根节点的子节点。

我该如何编码，以便TreeStore的第二个（和后续）实例有孙辈？

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

使用此小提琴：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(), 
    });