ExtJS - beforenodedropでのコールajax Ext.tree.TreePanelイベント

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

あなたは 'nodedrop' イベントにごアヤックスを移動したりするインターセプタを作成することができ、innerJLさんのコメント@から上

を追加しますnotifyDrop関数を呼び出してそこのデータを操作します。

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

}); 

自分でExtJSのコードを探求する必要がありますので、 'notifyDrop' に関するドキュメントはありません。