2012-02-08 17 views
1

如何調用AJAX我想打電話給beforenodedrop事件中Ajax和成功的時候,我想繼續操作樹。 但事件中止。 我怎麼能說裏面beforenodedrop一個Ajax。ExtJS的 - 在beforenodedrop Ext.tree.TreePanel事件

感謝您的幫助。

我的代碼在這裏:

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

最好的問候, 蒂亞戈

+1

waaaaay太多的代碼。看起來你做得對。請記住,Ajax調用是異步的,意味着它們在您的函數退出後回來。 – dbrin 2012-02-09 04:37:40

+0

同意DmitryB,也許你應該處理程序移動到afterdrop事件,讓樹工作?你可以隨時修改樹。 – 2012-02-09 07:24:20

回答

1

從@ innerJL的評論添加上,

你可以將你的阿賈克斯 'nodedrop' 事件或創建一個攔截器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 
     } 
    }); 

}); 

上有 'notifyDrop' 所以你需要自己去探索ExtJS的代碼的文檔。

+0

嗨,夥計非常感謝您的意見。正如你所說,更好的方法是使用success:function()並返回false調用者函數來處理節點。 – tafneo 2012-02-13 12:50:00

+0

不客氣;)是的,當然,這取決於何時何地,你要處理的節點上。 一定要記住我的答案解決辦法,如果你的作品:) – CincauHangus 2012-02-14 11:04:37