ExtJS - 如何在 beforenodedrop Ext.tree.TreePanel 事件中调用 ajax

Question

我试图在 beforenodedrop 事件中调用 ajax，当成功时，我想继续操作树。 但该活动已中止。 如何在 beforenodedrop 中调用 ajax？

感谢您的帮助。

我的代码在这里：

        // Moving nodes from data grid to tree
        beforenodedrop : {
            fn : function(e) {
                e.cancel = true;
                enableBtnEditAndDelete(false);//Disabling those btns edit and delete from grid toolbar
                // e.data.selections is the array of selected records from grid
                if (Ext.isArray(e.data.selections)) {
                    // setup dropNode (it can be array of nodes)
                    e.dropNode = [];

                    if(e.target.id != this.root.id) {
                        processBarWin.show();
                        var newParentId = e.target.leaf ? e.target.parentNode.attributes.idFolder : e.target.attributes.idFolder;
                        var idsToUpdate = '';
                        //Obj to log
                        var objLog = document.getElementById('log');
                        for ( var i = 0; i < e.data.selections.length; i++) {
                            // get record from selectons
                            var r = e.data.selections[i];
                            idsToUpdate += i > 0 ? ', ' + r.get('id') : r.get('id');

                            nodesToCreate[i] = this.loader.createNode({
                                text : r.get('description'),
                                leaf : true,
                                editable: false,
                                idIdea : r.get('id'),
                                description : r.get('description'),
                                content : r.get('content'),
                                idFolder : r.get('idFolder'),
                                insertDate : r.get('insertDate'),
                                updateDate : r.get('updateDate'),
                                qtip : r.get('content').substring(0, 50) + "..."
                            });

                        }
                        objLog.innerHTML = objLog.innerHTML + "after for<br />";
                        // reset cancel flag, permit to drop items
                        e.cancel = false;
                        for ( var i = 0; i < e.data.selections.length; i++) {
                            // get record from selectons
                            var r = e.data.selections[i];
                            // create node from record data

                            e.dropNode.push(this.loader.createNode({
                                text : r.get('description'),
                                leaf : true,
                                editable: false,
                                idIdea : r.get('id'),
                                description : r.get('description'),
                                content : r.get('content'),
                                idFolder : r.get('idFolder'),
                                insertDate : r.get('insertDate'),
                                updateDate : r.get('updateDate'),
                                qtip : r.get('content').substring(0, 50) + "..."
                            }));
                        }
                        Ext.Ajax.request({
                            url: 'Action/deuErro.php',
                            method: 'POST',
                            params: {
                                action: 'updateIdeaParent',
                                ids : idsToUpdate,
                                idFolder : newParentId
                            },
                            success: function(){
                                objLog.innerHTML = objLog.innerHTML + "success<br />";
                                for ( var i = 0; i < e.data.selections.length; i++) {
                                    var r = e.data.selections[i];
                                    gridStore.remove(r);
                                }
                                processBarWin.hide();
                            },
                            failure: function(){
                                objLog.innerHTML = objLog.innerHTML + "failure<br />";
                                processBarWin.hide();
                                yaMsgError(a.result.errors.title, a.result.errormsg);
                                return false;
                            }
                        });
                    } else {
                        yaMsgWarn(msgActionNotAllowed);
                        return false;
                    }
                } else { // from tree, not from the grid
                    //nothing here
                }
                // We want Ext to complete the drop, thus return true
                return true;
            }
        }

最好的问候， 蒂亚戈

Answer 1

添加@innerJL 的评论，

您可以将 Ajax 移动到“nodedrop”事件，或者创建一个 notificationDrop 函数的拦截器并在其中操作您的数据。

nodedrop 事件示例：

tree.on('nodedrop', function (drop) {
    Ext.Ajax.request({
       url: '....',
       method: 'POST',
       success: function () {
           //create new node in the tree.
       },
       failure: function () {
           //do nothing.
       }
    });
}, this);

拦截器示例：

tree.dropTarget.notifyDrop = tree.dropTarget.notifyDrop.createInterceptor(function (dragSource, event, data) {

    //show a loadmask on your tree.
    //manipulate your data if necessary

    // do your ajax load
    Ext.Ajax.request({
       url: '....',
       method: 'POST',
       success: function () {
           // retrieve your data and manipulate it. 
           // or maybe you want to create an event and fire it here and pass the data so yo can add a node at a later stage in your flow?
           return true;    // returning true will proceed with the drop 
       },
       failure: function () {
           //do nothing.
           return false;   // returning false will cancel the drop
       }
    });

});

没有关于“notifyDrop”的文档，因此您需要自己探索 ExtJS 代码。