Creating custom functions within views using Sencha Touch 2

I'm having trouble creating my own function in Sencha Touch 2 and I keep receiving an error:

Uncaught ReferenceError: function22 is not defined

The issue seems to be coming from my Position.js file located in the View directory.

Ext.define('GS.view.Position', {
extend: 'Ext.Map',

xtype: 'map',

config: {
    title: 'Position',
    iconCls: 'time',
    useCurrentLocation:true,
    mapOptions: {
        zoom: 19
    },

    listeners: {
        maprender : function(comp, map){
            //new google.maps.LatLng,
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                title: '1',
                map: map
            });
            google.maps.event.addListener(marker, 'click', function22);
            new google.maps.Marker({
                position: new google.maps.LatLng(51.266064,15.562048),
                title: '1',
                map: map
            });
        }
    }
},
function22: function(){
    alert('some alert');
}
});

Answer №1

Sencha touch is unique because it relies solely on Javascript! Anything that holds true for Javascript will seamlessly work with Sencha touch as well!

This was my innovative approach to solving the issue:

Before incorporating any other javascript into my html, I included this line:

<script type="text/javascript">var MYGLOBALOBJECT={v:{},f:{}};</script>

The MYGLOBALOBJECT consists of two components - v and f. In MYGLOBALOBJECT.v, I store all my variables like so:

MYGLOBALOBJECT.v.myNumber = 123.45;
MYGLOBALOBJECT.v.justASrting = 'this is a string';

As functions are just another variable type in Javascript, they can also be stored in this global object - which is where MYGLOBALOBJECT.f comes in:

MYGLOBALOBJECT.f.aGlobalFunction = function (parameter) {
    // perform useful actions
};

This function can then be utilized throughout the codebase like this:

var xy = MYGLOBALOBJECT.f.aGlobalFunction(someValue);

As MYGLOBALOBJECT is defined outside of any curly brackets, it stands as a global object accessible anywhere within your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to run a webpack project without relying on webpack-dev-server?

I've been working on hosting my project on GitHub pages by creating a /doc file and placing all my HTML, CSS, and JS there. If you're interested, you can check out my project here: https://github.com/mattfrancis888/the_movie_db The only way I&a ...

Received an unexpected character '?' in NextJS

After setting up a fresh installation of Ubuntu 22.04.1 LTS and installing npm and docker, I encountered an issue while trying to start my NextJS web server with the command npm run dev. An error message appeared as follows: niklas@srv-code01:~/Desktop/Co ...

ReactJS - troubleshooting webcam video stream issue

I can't figure out why this code is not working properly. I am able to access the camera stream and see the light on my camera indicating that it's working, but the stream doesn't seem to be attaching correctly. class VideoOutput extends ...

What is the best way to fetch data for each specific ID using axios.post when making a URL call?

Utilizing Axios to fetch data from an API and display them as cards in a movie component, I am facing the challenge of enabling users to click on a single movie card and navigate to another page (singlepage.vue) with the corresponding movie ID from the API ...

Arrange items in a particular order

I need help sorting the object below by name. The desired order is 1)balloon 2)term 3)instalment. loanAdjustmentList = [ { "description": "Restructure Option", "name": "instalment", " ...

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

When attempting to compare a "Date" type of data with an "Any" type of data, the comparison is not functioning as expected. The date is retrieved in the following code: var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); v ...

What is the process for moving information between files?

I have two files which are named as, employee-rates-controller.ts: private load() { return this.entityService .load(this.$scope.projectRevisionUid) .then(resp => { localStorage.removeItem('employeerates'); this.$ ...

Why aren't variables showing up on the right when using writeFileSync in Node.js?

I'm attempting to insert a variable as ${Y} but instead of getting the actual data in Y, my output is showing (how can I write variable ${Y}). Does anyone have a solution for this? const fs = require('fs'); const Y = fs.readFileSync('./ ...

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Having a multitude of JavaScript files loaded on a single page can result in decreased performance. My inquiry is this: Is it preferable to have individual files or combine them into one JavaScript file? If consolidating all scripts into one file is the ...

Assign the path parameter to the component key in the Route

One of the routes in my application is defined as shown below: <Route exact path="/licenses/:type?" component={Licenses} /> I want the component to re-render every time the type parameter changes. According to react-router documentation, I ...

Exploring elements in Javascript

I am attempting to retrieve values from various elements when a 'a' element is clicked. Consider the following code: <tr data-id="20"> <div class="row"> <td> <div class="btn-group"> <a data-checked= ...

The ng-message function appears to be malfunctioning

I am facing an issue with the angularjs ng-message not working in my code snippet. You can view the code on JSfiddle <div ng-app="app" ng-controller="myctrl"> <form name="myform" novalidate> error: {{myform.definition.$error ...

Safari's problem with CSS transitions

This issue is specific to Safari, as it has been tested and works fine in Chrome, Opera, and Firefox. Upon hovering over a certain div (1), a child div (2) slides out by adjusting the left property. However, the child elements (buttons) within the second ...

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

What is the best way to display user input within a paragraph using React?

I've been working on a To-Do list and I have successfully implemented the functionality to add new tasks. The issue I'm facing is that when I try to add a task, it doesn't show up in the paragraph within my Todo component, even though I can ...

Saving a JavaScript array as a Redis list: A step-by-step guide

I'm trying to figure out how to save array values individually in a Redis list instead of saving the whole array as a single value. Any suggestions on how to achieve this? P.S. Please excuse my poor English. var redis = require('redis'), ...

Uniquely tag an uploaded file

My code for uploading files is as follows: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.open("POST", requestUrl, true); xhr.send(f); I want to draw your attention to the fact that I have attached a l ...

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

What is the best way to store data retrieved using a model.find({}) operation?

I am currently attempting to calculate the average value of a collection in my database using Mongoose and Express. The objective is to utilize this calculated value on the "calculator" page when rendering, which is why it is embedded in a post for that sp ...