首页 文章

appendChild树节点不会展开

提问于
浏览
0

我有一个树面板,我在初始加载时设置了一些根级节点 . 然后当一个节点打开时,我有一个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请求..)进行树的“延迟加载”?

1 回答

  • 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 .

    也许有人对此有更好的答案 .

相关问题