Ext JS 4: Установка другого корневого узла для TreeStore - PullRequest
Новая
       45

Ext JS 4: Установка другого корневого узла для TreeStore

3 голосов
/ 20 марта 2012

Я пытаюсь установить другой корневой узел в моем TreeStore в Ext JS 4.0.7, но мне кажется, что я не могу сделать это правильно ... Я не знаю, является ли это еще одна ошибка в рамках или еслиЯ просто неправильно использую функции, поэтому прошу помощи.Вот код, с которым я работаю.

Создание пустого узла для последующего использования 

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

Установка снимка 2 для текущего корневого узла магазина 

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

Так что, когда вынажмите первую кнопку, и вы получите правильное значение ('child1') в предупреждении.Однако, когда вы нажимаете вторую кнопку («установить dummy1 как root»), вы получаете неопределенное предупреждение.Третья кнопка дает вам правильный вывод ('dummy1') и вручную копирует каждый дочерний элемент в корень.

Мне кажется, что функция копирования или функция setRootNode что-то делает неправильно (больше склоняясь к первому).Если я указываю глубокую копию с copy(null, true), то глубокая копия должна выполняться, и все должно быть в порядке ... но я понимаю, что есть проблема с функцией копирования с самого начала (см. нить ).Вот почему я думаю, что это может быть с setRootNode, но это не имело бы смысла, если setRootNode работает для моего созданного узла, но не для глубоко скопированного исходного корневого узла.

Может кто-нибудь предложить какое-либо понимание относительночто я делаю не так?Буду признателен за любую помощь.Спасибо!

Ответы [ 2 ]

0 голосов
/ 06 сентября 2012

Я думаю, что в копии есть ошибка, которая до сих пор не устранена:

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

0 голосов
/ 20 апреля 2012

Я не уверен, где ваша проблема в приведенном выше коде, но я могу предложить «лучший» способ - этот работает, по крайней мере, я думаю, что он также делает то, что вы намереваетесь здесь:

Определите два узла - снимок и корень 

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

Затем определите свой магазин и функции (снимок снимка2) 

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
        }
    }]
...