代碼結構與ExtJS

Question

我想組織我的ExtJS JavaScript更好一點。我有一個像這樣的ExtJS對象：

Ext.define('QBase.controller.ControlModelConfigurationController', { 
    extend: 'Ext.app.Controller', 

    views: [ 
     'ControlModelConfiguration' 
    ], 

    init: function() { 
     console.log('Initialized ControlModelConfigurationController'); 
     this.control({ 
      '#testBtn': { 
       click: this.loadModel 
      } 
     }); 
    }, 

    loadModel: function() { 
     console.log('Load Model....'); 
     var conn = new Ext.data.Connection; 
     conn.request({ 
         url: 'partsV10.xml', 
         callback: function(options, success, response) 
         { 
          if (success) 
          { 
           alert("AHHH"); 
           var dq = Ext.DomQuery; 
           var xml = response.responseXML; 
           var nodes = dq.select('part', xml,parent); 
           Ext.Array.forEach(nodes,handleNode); 
          } 
         } 
     }); 
    }, 
    handleNode: function(items) { 
     console.log(item.name); 
    } 
}); 

上面的發佈代碼不起作用。 Ext.Array.forEach（nodes，handleNode）會造成麻煩。而不是使用像這樣的匿名函數：

... 
Ext.Array.forEach(nodes,function(item) { 
    console.log(item)}); 
} 
... 

我想提取匿名函數作爲命名的外部函數。不幸的是，我無法找出正確的語法來建立如上所示的代碼結構。

同時，我也想通了，那把

function handleNode(item) { 
    {console.log(item)} 
} 

在文件的最後工作。是否有可能使handleNode方法成爲對象 - 控制器的「成員」？

預先感謝

克里斯

Answer 1

vhallac發佈的解決方案並不完全正確。它假定handleNode不通過this變量引用當前對象。也許只是一個錯字，但另外它不是真正的ExtJS方式......

每當ExtJS提供回調參數時，在回調函數中幾乎總是有一個scope參數來設置this的值。

loadModel: function() { 
    console.log('Load Model....'); 
    var conn = new Ext.data.Connection; 
    conn.request({ 
     url: 'partsV10.xml', 
     callback: function(options, success, response) { 
      if (success) { 
       alert("AHHH"); 
       var dq = Ext.DomQuery; 
       var xml = response.responseXML; 
       var nodes = dq.select('part', xml, parent); 
       Ext.Array.forEach(nodes, this.handleNode, this); 
      } 
     }, 
     scope: this 
    }); 
}, 

handleNode: function(node) { 
    // From within here you might want to call some other method. 
    // Won't work if you leave out the scope parameter of forEach. 
    this.subroutine(); 
} 

就像forEach使用範圍參數一樣，請求方法使用範圍配置選項。這是ExtJS在範圍內傳遞的慣例。你也可以創建一個額外的局部變量，並從那裏引用範圍，但在ExtJS的上下文中，這種風格會感到尷尬，加上（我敢肯定），它更容易出錯。

Answer 2

handleNode是包含對象的成員。當調用loadModel時，this包含正確的對象，但在調用回調時，它不會指向我們感興趣的對象。您可以將this保存到局部變量self，並用它代替。

loadModel: function() { 
    var self = this 
    console.log('Load Model....'); 
    var conn = new Ext.data.Connection; 
    conn.request({ 
        url: 'partsV10.xml', 
        callback: function(options, success, response) 
        { 
         if (success) 
         { 
          alert("AHHH"); 
          var dq = Ext.DomQuery; 
          var xml = response.responseXML; 
          var nodes = dq.select('part', xml,parent); 
          Ext.Array.forEach(nodes, self.handleNode); 
         } 
        } 
    }); 
},