Question

我正在尝试在Ext JS 4.0.7中的TreeStore中设置一个不同的根节点，但我似乎无法正确执行...我不知道它是否是框架中的另一个错误或者是否我只是错误地使用这些功能，所以我正在寻求帮助。这是我正在使用的代码。

创建空白节点以便稍后使用

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

商店

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

树面板

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

将snapshot2设置为商店的当前根节点

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

因此，当您单击第一个按钮时，您将在警报中获得正确的值（'child1'）。但是，当您单击第二个按钮（'将dummy1设置为root'）时，您将在警报中得到未定义。第三个按钮为您提供正确的输出（'dummy1'），并手动将每个子项深度复制到根目录。

对我来说，似乎复制功能或setRootNode功能没有正确地做某事（更倾向于前者）。如果我使用copy(null, true)指定一个深层副本，则应该进行深层复制，一切都应该没问题......但是我发现get go中的复制功能存在问题（请参阅此{ {3}}）。这就是为什么我认为它可以与setRootNode一起使用，但如果setRootNode适用于我创建的节点而不适用于深度复制的原始根节点，则没有意义。

任何人都可以提供任何关于我做错的见解吗？我很感激任何帮助。谢谢！

Answer 1

我不确定上述代码中你的问题在哪里，但我可以提供一种“更好”的方式 - 至少，这个方法有效，我认为它也符合你的意图：

定义两个节点 - 快照和根

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

var rootNode = {
    id: 'root',
    text: 'root',
    expanded: true,
    children: [{
        id: 'dummy1',
        text: 'dummy1',
        leaf: true 
    },{  
        id: 'dummy2',
        text: 'dummy2',
        leaf: true 
    }]   
};

然后，定义您的商店和功能（报废snapshot2）

var store = Ext.create('Ext.data.TreeStore', {
    storeId: 'treestore',
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    },
    snapshot: node,
    root: rootNode
});

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(rootNode);
            alert(store.getNodeById('dummy1').data.id);  // now alerts dummy1
        }
    }]

Answer 2

我认为副本有一个尚未解决的错误：

http://www.sencha.com/forum/showthread.php?134844-tree-node-copy%28deep%29-not-working-%284.0.1%29&highlight=tree%20copy

Ext JS 4：为TreeStore设置不同的根节点

2 个答案: