自定义计算功能Sencha Touch

Question

I'm working in Sencha Touch 2.4 and I want to perform calculation on specific view card. However, is it possible to define the calculation function outside the view (may be in model or controller) so that when the view is loaded, it just calls the function.

I'm currently calling myCalc function in onActivate event and the result is currently displaying by console.log() on console.

My First question is, is it possible to define my calculation function (a couple of methods are using in calculation) outside the view so that to optimise the performance and calling in the view with argument of method to calculate by the argument method?

function myCalc(method) {}

My Second question is, how to display my calculated results on view, I set up an id named as myID how can I display the results by the help of id?

My Code:

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: I'm using GPS coordinates in my calculation. I want to set them or the result to my screen. how can I setHtml or get the coordinates outside the 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();
}

Answer 1

There are several options how to do it:

1. If there is an instance of model, a record, somewhere behind the card then the easiest, most effective and elegant is to implement the calculation at the model level as a calculated field . Record field is usually very easy to display in the view.
2. You can implement the function as a method of your namespace so that you can call it from anywhere: MyApp.myCalc(arguments) . View, the card, would listen to activate event, call the method and display the result.

Answer 2

You can define your function in it's own class using Ext.define and then use it throughout your application like this:

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

You could create this in its own file, for example App.util.Calculator . You could also use it as a mixin ( guide here ), so that you can add this functionality to any other class.

To update the results of a card, use something like this:

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

EDIT: This is out of scope in the code you posted, try something like this.

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