I’m trying to set a different root node in my TreeStore in Ext JS

Question

0

Asked: June 10, 20262026-06-10T20:22:14+00:00 2026-06-10T20:22:14+00:00

I’m trying to set a different root node in my TreeStore in Ext JS

0

I’m trying to set a different root node in my TreeStore in Ext JS 4.0.7, but I can’t seem to do it correctly… I don’t know if it’s another bug in the framework or if I’m just using the functions incorrectly, so I’m asking for help. Here is the code that I’m working with.

Creating a blank node to use later on

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

The store

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
    }
  }]
});

Setting snapshot2 to the store’s 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 proper value (‘child1’) in the alert. However, when you click the second button (‘set dummy1 as root’), you get undefined in the alert. The third button gives you the proper output (‘dummy1’), and manually deep copies each child to the root.

To me, it seems like the copy function or the setRootNode function isn’t doing something properly (leaning more toward the former). If I’m specifying a deep copy with copy(null, true), then the deep copy should be taking place, and everything should be fine… but I realize there’s a problem with the copy function from the get go (see this thread). That’s why I’m thinking it could be with the setRootNode, but that wouldn’t make sense if setRootNode works for my created node but not for the deep copied original root node.

Can anyone offer any insight as to what I’m doing wrong? I’d appreciate any help. Thanks!