extjs4 - ExtJS TreeStore 更新事件触发而不是创建

Question

我在调用时将 tree.Panel 与 TreeStore 一起使用

sel_node.parentNode.appendChild(node);
tree.getSampleStore().sync();

ExtJS 触发事件称为示例存储代理:更新 url 而不是创建 url 我可能做错了什么？

Answer 1

您使用的是哪个确切版本的 ExtJS4？

在我的情况下，使用 ext-4.0.7-gpl，我调试了一下发现 appendChild方法从和对象创建一个节点，然后执行一些关于节点在树中位置的更新操作，例如设置下一个兄弟节点、父节点等，参见 [1]。

同步时，商店使用 getUpdatedRecords和 getNewRecords [2] 确定运行哪个操作的方法。更新或创建。不知何故，我们附加的 child 结果是更新了，而不是创建了。

请注意，该方法不会检查父节点的子节点是否已加载，只是将新节点推送到空 childNodes 中。大批;在所有这些操作结束后，父节点的其他子节点永远不会显示在树中；如果更新操作导致服务器端生成新的 id , 代码在 original = me.tree.getNodeById(record.getId()); 行中断- 旧的 id 没有这样的节点在客户端生成..

简单地说，我认为这是一个错误。

[1] http://docs.sencha.com/ext-js/4-0/source/NodeInterface.html#Ext-data-NodeInterface-method-appendChild
[2] http://docs.sencha.com/ext-js/4-0/source/AbstractStore.html#Ext-data-AbstractStore-method-getUpdatedRecords

添加 :ExtJS 4.1 beta 2 不适合我

使用临时解决方案更新 :我黑了一点，认为我通过覆盖 appendChild 解决了这个问题。 NodeInterface的方法像下面一样(只是设置 phantom 属性，以便记录被创建，而不是更新)。

请注意:
1) 你应该包括你的 appendChild调用 NodeInterface expand方法回调，或推到空的错误 childNodes会保留:新节点会出现在错误的地方；
2)我不得不覆盖updateIndexes的AbstractView同样，尽量不要这样做，也许你会找出原因；
3)当存储在下次同步时尝试删除我们新创建的节点时存在一些问题 - 无法追踪它；
0) 我不是 ExtJS 甚至 JS 大师，所以请随时纠正这个 hack)

Ext.data.NodeInterface.oldGpv = Ext.data.NodeInterface.getPrototypeBody;
Ext.data.NodeInterface.getPrototypeBody = function(){
    var ret = Ext.data.NodeInterface.oldGpv.apply(this, arguments);

    ret.appendChild = function(node, suppressEvents, suppressNodeUpdate) {
        var me = this,
        i, ln,
        index,
        oldParent,
        ps;


        if (Ext.isArray(node)) {
            for (i = 0, ln = node.length; i < ln; i++) {
                me.appendChild(node[i]);
            }
        } else {
            node = me.createNode(node);

            if (suppressEvents !== true && me.fireEvent("beforeappend", me, node) === false) {
                return false;
            }

            index = me.childNodes.length;
            oldParent = node.parentNode;

            if (oldParent) {
                if (suppressEvents !== true && node.fireEvent("beforemove", node, oldParent, me, index) === false) {
                    return false;
                }
                oldParent.removeChild(node, null, false, true);
            }else{
                node.phantom = true;
            }

            if(me.isLoaded()){
                index = me.childNodes.length;
                if (index === 0) {
                    me.setFirstChild(node);
                }

                me.childNodes.push(node);
                node.parentNode = me;
                node.nextSibling = null;

                me.setLastChild(node);

                ps = me.childNodes[index - 1];
                if (ps) {
                    node.previousSibling = ps;
                    ps.nextSibling = node;
                    ps.updateInfo(suppressNodeUpdate);
                } else {
                    node.previousSibling = null;
                }
                node.updateInfo(suppressNodeUpdate);
            }

            //console.log('appendChild was called');

            // I don't know what this code mean even given the comment
            // in ExtJS native source, commented out

            // As soon as we append a child to this node, we are loaded
            //if (!me.isLoaded()) {
            //    me.set('loaded', true);
            //}

            // If this node didnt have any childnodes before, update myself
            //else 
            //if (me.childNodes.length === 1) {
            //    me.set('loaded', me.isLoaded());
            //}

            if (suppressEvents !== true) {
                me.fireEvent("append", me, node, index);

                if (oldParent) {
                    node.fireEvent("move", node, oldParent, me, index);
                }
            }

            return node;
        }
    };
    return ret;
};

这是我的代码，用于通过取自表单 domainForm 的值添加节点.通过单击 actioncolumn 中的图标打开该表单。我们的树网格:

var node = grid.store.getAt(rowIndex);
node.expand(false, function(){
    var newDomain = domainForm.getValues();
    newDomain.parent = {id: node.raw.id}; // i don't know whether you'll need this
    var newNode = node.appendChild(newDomain);
    me.store.sync();
});

和 updateIndexes覆盖:

Ext.override(Ext.view.AbstractView, {
    updateIndexes : function(startIndex, endIndex) {
        var ns = this.all.elements,
            records = this.store.getRange(),
            i;

        startIndex = startIndex || 0;
        endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length < records.length?(ns.length - 1):records.length-1) );
        for(i = startIndex; i <= endIndex; i++){
            ns[i].viewIndex = i;
            ns[i].viewRecordId = records[i].internalId;
            if (!ns[i].boundView) {
                ns[i].boundView = this.id;
            }
        }
    }    
});