自定义计算功能 Sencha Touch答案

【问题标题】：custom calculation function Sencha Touch自定义计算功能 Sencha Touch
【发布时间】：2015-01-20 17:28:01
【问题描述】：

我在 Sencha Touch 2.4 中工作，我想在特定的视图卡上执行计算。但是，是否可以在视图之外（可能在模型或控制器中）定义计算函数，以便在加载视图时只调用该函数。

我目前正在onActivate 事件中调用 myCalc 函数，结果当前由控制台上的console.log() 显示。

我的第一个问题是，是否可以在视图之外定义我的计算函数（在计算中使用了几个方法），以便优化性能并在视图中调用方法参数以通过参数方法计算?

function myCalc(method) {}

我的第二个问题是，如何在视图中显示我的计算结果，我设置了一个名为myID 的 id，如何通过 id 显示结果？

我的代码：

xtype: 'mycard',
config: {
        listeners: {
            activate: 'onActivate'
        },
        id: 'myID',
        styleHtmlContent: true
        ],
    }
 onActivate: function(me, container) {
 var results = new myCalc('METHOD1');
 console.log(results);
function myCalc(method) {...}
}

EDIT1： 我在计算中使用 GPS 坐标。我想将它们或结果设置到我的屏幕上。如何setHtml 或获取locationupdate 之外的坐标？

onActivate: function(me, container) {
    var geo = Ext.create('Ext.util.Geolocation', {
     autoUpdate: false,
     listeners: {
      locationupdate: function(geo) {
         var currentLat = geo.getLatitude();
         var currentLng =  geo.getLongitude();
         var PT = new Ext.util.Calc.myCal('METHOD1');
         var c = PT.setC([currentLat, currentLng]);
         //this.setHtml(c); // not working
         console.log(c);
      }
      }
    });
    geo.updateLocation();
}

【问题讨论】：

标签： javascript extjs model-view-controller sencha-touch-2 sencha-touch-2.1

【解决方案1】：

您可以使用 Ext.define 在它自己的类中定义您的函数，然后像这样在整个应用程序中使用它：

Ext.define("Calculator", {
   addition: function(num1, num2) {
       return num1 + num2;
   },
   subtract: function(num1, num2) {
       return num1 - num2;
   }
   ...
});

您可以在它自己的文件中创建它，例如App.util.Calculator。您也可以将其用作 mixin (guide here)，以便将此功能添加到任何其他类。

要更新卡片的结果，请使用以下内容：

items: [{
    title: 'Home',
    iconCls: 'home',
    html: 'Home Screen',
    listeners: {
        activate: function() {
            var calc = new Calculator();
            this.setHtml('2 + 3 = ' + calc.addition(2,3));
        }
    }
}]

编辑：这超出了您发布的代码的范围，请尝试这样的操作。

onActivate: function(me, container) {
    var that = this;
    var geo = Ext.create('Ext.util.Geolocation', {
     autoUpdate: false,
     listeners: {
      locationupdate: function(geo) {
         var currentLat = geo.getLatitude();
         var currentLng =  geo.getLongitude();
         var PT = new Ext.util.Calc.myCal('METHOD1');
         var c = PT.setC([currentLat, currentLng]);
         that.setHtml(c); // not working
         console.log(c);
      }
      }
    });
    geo.updateLocation();
}

【讨论】：

谢谢。我的方法和创建自己的插件方法之间有什么性能差异吗？
老实说，我认为它们之间没有太大区别，我只是考虑如何使用该类。计算器可能最适合像这样的 util 类，它可以在整个应用程序中使用。
好的，可以对这个应用单例属性，这样计算就一次，当视图被调用时，它会显示之前计算的？
是的，您可以这样做，并且可能在类上有一个 lastResult 属性，可以为您保留该信息
setHtml 给出未定义的参考错误。如何设置结果？我的代码在：locationupdate: function(geo) {} 如何在locationupdate 或setHtml 之外设置纬度和对数？

【解决方案2】：

有几种方法可以做到这一点：

如果在卡片后面的某个地方存在模型实例、记录，那么最简单、最有效和优雅的方法是将模型级别的计算实现为calculated field。记录字段通常很容易在视图中显示。
您可以将该函数实现为命名空间的方法，以便可以从任何地方调用它：MyApp.myCalc(arguments)。卡片视图会监听激活事件，调用方法并显示结果。

【讨论】：