Ext JS 4: setting a different root node for TreeStore

I'm trying to set a different root node in my TreeStore in Ext JS 4.0.7, but I can't seem to get it right ... I don't know if this is another structure error or if I'm just using functions incorrectly, so I'm asking for help. Here is the code I am working with.

Creating an empty node for later use

var node = {
  id: 'root',
  text: 'root',
  expanded: true,
  children: [{
    id: 'child1',
    text: 'child1',
    leaf: true
  },{
    id: 'child2',
    text: 'child2',
    leaf: true
  }]
};

      

        
        
        
      

    

Score

var store = Ext.create('Ext.data.TreeStore', {
  storeId: 'treestore',
  proxy: {
    type: 'memory',
    reader: {
      type: 'json'
    }
  },
  snapshot: node,
  root: {
    id: 'root',
    text: 'root',
    expanded: true,
    children: [{
      id: 'dummy1',
      text: 'dummy1',
      leaf: true
    },{
      id: 'dummy2',
      text: 'dummy2',
      leaf: true
    }]
  }
});

      

        
        
        
      

    

Tree panel

Ext.create('Ext.tree.Panel', {
  store: store,
  renderTo: Ext.getBody(),
  height: 600,
  width: 600,
  id: 'mytree',
  tbar: [{
    xtype: 'button',
    text: 'set child1 as root',
    handler: function() {
      var store = Ext.getCmp('mytree').store;
      store.setRootNode(store.snapshot);
      alert(store.getNodeById('child1').data.id);  // alerts child1
    }
  },{
    xtype: 'button',
    text: 'set dummy1 as root',
    handler: function() {
      var store = Ext.getCmp('mytree').store;
      store.setRootNode(store.snapshot2.copy(null, true));
      alert(store.getNodeById('dummy1'));  // alerts undefined
    }
  },{
    xtype: 'button',
    text: 'set dummy1 with diff copy',
    handler: function() {
      var store = Ext.getCmp('mytree').store;
      store.getRootNode().removeAll();
      store.snapshot2.eachChild(function(rec) {
        store.getRootNode().appendChild(rec.copy(null, true));
      });
      alert(store.getNodeById('dummy1').data.id);  // alerts dummy1
    }
  }]
});

      

        
        
        
      

    

Installing snapshot2 to the current root node

Ext.getCmp('mytree').store.snapshot2 = Ext.getCmp('mytree').store.getRootNode().copy(null, true);

      

        
        
        
      

    

So when you click the first button you get the correct value ('child1') in the alert. However, when you click the second button ("set dummy1 as root"), you get undefined in the warning. The third button gives the correct output ("dummy1") and manually deeply copies each child into the root directory.

It seems to me that the copy function or the setRootNode function is not doing things as expected (leaning more towards the former). If I specify a deep copy with copy(null, true)

, then there should be a deep copy and everything should be fine ... but I understand there is a problem with the copy function from get go (see this thread ). This is why I think it might be with setRootNode, but it doesn't make sense if setRootNode works for my created node, but not for the root source root node.

Can anyone please tell me what I am doing wrong? Any help would be appreciated. Thank!