appendChild tree node не разворачивается

Question

У меня есть панель дерева, где я устанавливаю некоторые узлы корневого уровня при начальной загрузке. Затем, когда узел открывается, у меня есть функция javascript, которая добавляет к нему дочерние узлы.

У меня есть проблема, что я не могу заставить узел расширяться. Он не показывает стрелку для расширения узла.

Вот как добавить дочерние узлы:

var onbeforeitemexpand = function(node, options) { 
    if (!node.hasChildNodes()) { 
     node.appendChild({ 
      title:'Should not be expandable', 
      checked: false, 
      leaf:true 
     }); 
     node.appendChild({ 
      title:'Should expand', 
      checked: false, 
      leaf:false, 
      expandable:true 
     }); 

}; 

tree.on('beforeitemexpand', onbeforeitemexpand, null); 

Но второй ребенок не расширяется. Единственный способ, которым я могу получить его, чтобы быть расширяемой, чтобы добавить пустые детей к ней, как это:

 node.appendChild({ 
      title:'Should expand', 
      checked: false, 
      leaf:false, 
      expandable:true, 
      children:[{}] 
     }); 

Но тогда будет пустой узел под ним, и когда я пытаюсь добавить детей в этом узле, когда он расширяется , дочерние узлы войдут внутрь пустого узла.

Есть ли какой-нибудь лучший способ сделать «ленивую загрузку» дерева через мою собственную функцию javascript (не через запрос ajax ..)?

Answer 1

Независимо от того, что я пытался, я не могу получить стрелку> для узлов, когда я добавляю узел в дерево через функцию. Я попытался выше решением и пользовательский считывателя прокси .. Я, наконец, поселился с этим:

 Ext.define('Ext.proxy.DocumentNodes', { 
      extend: 'Ext.data.proxy.Memory', 
      alias: 'proxy.documentnodes', 
      read: function(operation, callback, scope) { 
       var parent=operation.node; 
       var children=[]; 
       children.push(
        Ext.create('Document',{ 
         title:'Some document', 
         iconCls:'task-folder', 
         checked: false, 
         leaf: false, 
         expandable: true, 
         children: [{tempitem: true}] 
        }) 
       ); 
       var result=Ext.create("Ext.data.ResultSet",{records: children}); 
       Ext.apply(operation, {resultSet: result}); 
       operation.setCompleted(); 
       operation.setSuccessful(); 
       Ext.callback(callback, scope || this, [operation]); 
      } 
     }); 

     Ext.define('Document', { 
      extend: 'Ext.data.Model', 
      fields: [ 
       {name: 'title', type: 'string'}, 
      ] 
     }); 

     var store = Ext.create('Ext.data.TreeStore', { 
      model: 'Document', 
      proxy: { 
       type: 'documentnodes' 
      }, 
      nextId: 1, 
      folderSort: false 
     }); 

Затем используйте этот магазин для панели дерева и имеет onbeforeitemexpand слушателя для дерева, как это:

 var onbeforeitemexpand = function(node, options) { 
      var firstChild = node.getChildAt(0); 
      if (firstChild.get('tempitem')) { 
       node.removeChild(firstChild, true); 
      } 
      node.store.load({ node: node }); 
     }; 

     tree.on('checkchange', oncheckchange, null); 
     tree.on('beforeitemexpand', onbeforeitemexpand, null); 

Что все это делает то, что сначала прокси-ридер создает узел и добавляет пустой узел под ним, поэтому перед узлом появляется стрелка>. Затем в preitemexpand он проверяет, является ли первый узел временным узлом и удаляет его, и вызывает перезагрузку для узла, который затем выполняет прокси-считыватель, который добавляет новый узел под тем, который был открыт, и временным узлом под ним ...

Похоже, это глупый способ сделать это, но он работает, и я не знаю, как еще я могу получить стрелку>, чтобы появиться перед узлом, если узел не имеет в нем никаких детей, кроме листа для false и expandable установлено значение true.

Возможно, у кого-то есть лучший ответ на этот вопрос.