代码结构与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); 
         } 
        } 
    }); 
},