ExtJS6：TreeStoreの2番目のインスタンスに孫がありません

Question

ExtJS6：TreeStoreの2番目のインスタンスには孫がいません。

私は、TreeStoreから継承するクラスMyStoreを持っています。 次に、treepanelに表示するMyStoreのインスタンスを作成しました。 これまでのところとても良いです。 次に、別のtreepanelに表示されるMyStoreの別のインスタンスを作成しました。 ここに問題があります：第2のtreepanelには孫がいません。ルートノードとルートノードの子ノードだけです。

TreeStoreの2番目（以降）のインスタンスに孫が含まれるようにするにはどうすればよいですか？

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(), 
    });