2014-09-29 137 views
0

我有一个树面板,我在初始加载时设置了一些根级节点。然后当一个节点被打开时,我有一个javascript函数,它在其下面添加了子节点。appendChild树节点不扩展

我有一个问题,我无法让节点可扩展。它不显示箭头来展开节点。

下面是如何添加子节点:

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请求..)对树进行“延迟加载”?

回答

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

什么这一切都是,首先代理读取器创建节点并在其下面添加一个空节点,使得>箭头出现在节点之前。然后在beforeitemexpand中检查第一个节点是否是临时节点,并删除它并调用该节点的重新加载,然后执行代理读取器,在已打开的节点下方添加新节点,并在其下面添加临时节点...

看起来很愚蠢的方式来做到这一点,但它的工作原理,我不知道如果节点没有任何子节点但是叶子已设置为false并可扩展设置为true。

也许有人对此有一些更好的答案。