Having issues with Sencha Touch not initiating in mobile browsers

For quite some time now, I have been developing a mobile app using Sencha Touch 2.1 and conducting tests primarily on desktop Chrome and an iOS PhoneGap / Cordova package. Recently, I made the decision to release it as a "native" app while also offering reduced functionality as a web app.

In my experimentation, I found that the web app loads successfully on desktop browsers such as Safari and Chrome for Mac, but encounters issues when accessed through mobile browsers like Safari and Chrome on iOS, as well as the Android 2.3 browser.

Even when experimenting with the package build, the testing build does not yield better results. Upon inspecting the app using Safari developer console, I observed that the Ext object appears to be fully loaded. All views, controllers, models, and stores are present in my app's namespace, yet crucial properties like app and config are missing. Additionally, the launch() function does not execute, all without any errors being displayed in the console.

Has anyone else encountered this issue and discovered a solution or some helpful troubleshooting tips?

javascriptsencha-touchmobile-safariandroid-browser

Answer №1

Have you double-checked your app.json file? If you included the path for cordova.js with "x-bootstrap": true, the file may not be copied to the destination during the build process.

"js": [
    {
        "path": "touch/sencha-touch.js",
        "x-bootstrap": true
    },
    {
        "path": "lib/cordova.js",
        /*"x-bootstrap": true*/
    },
    {
        "path": "app.js",
        "bundle": true,
        "update": "delta"
    }
],

Answer №2

The issue arose from incorporating cordova.js in app.json. However, the underlying problem seems to stem from the fact that external libraries are not properly included in production builds of Sencha Touch, rendering them inaccessible to the application. While previous concerns were thought to be related to package and testing builds, it has become evident that only production builds encounter issues when external libraries (such as cordova.js) are included.

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

NextJS build problem causing all content to become static

As a newcomer to NextJS with prior experience in basic React apps, I recently attempted to deploy a CRUD NextJS app (utilizing prisma and mongoDB). Everything runs smoothly with npm run dev, but issues arise when transitioning to npm run build followed by ...

javascriptreactjsnext.jsserver-side-renderingprisma

Locate element in Cypress with ID that includes a span element

Recently diving into Cypress, I'm looking to locate an element with a dynamic id that contains specific text. For instance: ... <div class="col2"> <button id="random-city-name_type-125" class="btn-secondary"> ...

javascriptreactjscypress

What is the best way to connect or link to a HTML table row <tr>

Is there a way to trigger an alert when the user double clicks on the whole row? ...

javascripthtmlcsshtml-table

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Currently, I am testing a JQuery Mobile webpage that features a simple list setup: Upon clicking the list items, they get highlighted and their ids are saved in a local array. Is there an easy (or not so easy) way to transition the selected elements slidi ...

javascriptjqueryhtmljquery-mobile

Receiving data dynamically from Highcharts results in an additional legend appearing in the chart display

I am currently looking for a solution to dynamically create highcharts series in my project. Although I have tried using the addSeries method, I am encountering an issue where an extra legend is appearing unnecessarily. If you are aware of any alternative ...

javascriptajaxhighcharts

Tips for splitting the json_encode output in Javascript

Looking for help with extracting specific values from JSON data retrieved via PHP and AJAX. I only want to display the agent name in my ID, not the entire object that includes "name" : "Testing". Here is the console output: [{"agent_module_id":"1","agen ...

javascriptphpjqueryajax

Failure to choose a value in AngularJS using the Chosen directive

I am currently developing a project with AngularJS and I need to display the selected value. To achieve this, I am utilizing the chosen filter available at: https://github.com/leocaseiro/angular-chosen Below is the code snippet that I have implemented: ...

javascriptangularjs

Load data onto a dropdown menu using Ajax requests

My view currently includes a dropdown menu. Upon selecting an item from the dropdown, AJAX is supposed to load. The table 'locations' has a one-to-many relationship with 'contacts.' When I select a location from the locations dropdown, ...

javascriptphpajaxlaravel-5

Verifying One Time Password (OTP) from MSG91 URL using ReactJS

Currently, I am working on a small project that involves receiving and verifying OTPs from MSG91. While I have managed to successfully receive OTPs using MSG91, I am encountering an issue when trying to verify OTPs - specifically, I keep getting an error ...

javascriptexpressone-time-password

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

javascripthtmlcss

Obtain the value of "Placeholder" using JavaScript in Internet Explorer without the need for JQuery

I have some custom Javascript code that checks for browser support of placeholders and creates them if not supported. This solution works on some older browsers, but not all, especially IE. The issue I am facing is retrieving the "Placeholder" value; curr ...

javascriptinternet-explorer

Ways to update list item text with jQuery

I am attempting to create a button that can replace the content of a list item. Although I have looked at other solutions, I keep encountering this error message: Uncaught TypeError: Object li#element2 has no method 'replaceWith' I have experime ...

javascriptjqueryhtmldom

Check for support of Symbol.toStringTag in JavaScript

Can this function reliably detect the presence of @@toStringTag in all environments? function hasToStringTagSymbol() { if (Symbol && (typeof Symbol() == "symbol") && !!Symbol.toStringTag) { var xTest = function () { }; xTest.prototyp ...

javascriptecmascript-6ecmascript-5

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

Interactive form found on a webpage

Hey there! I'm currently working on a task where I want a form to be displayed when the edit button is clicked. Once the save button in the form is pressed, I want to update my database with the new information. It's crucial that this process hap ...

javascriptjqueryajaxforms

The spotlight is shifting towards validating a datepicker field using jQuery

I am currently working on validating a datepicker field using jQuery. However, whenever I try to validate it, the calendar popup opens up. I only want to display the validation message without the datepicker popup. ...

javascriptjqueryjquery-ui

A guide on setting up ExpressJS Error Handling to display custom error messages based on the corresponding HTTP Status codes

I am struggling to figure out how to implement this task. You need to create an error on the /error path and pass it to the next function. Make sure to use appropriate error status codes for displaying different types of error messages. I attempted using ...

javascriptnode.jsreactjsexpresserror-handling

The JSON data script is not functioning properly

Is this JSON formatted correctly? Why is it not displaying in the element with #id? I found a similar code snippet on https://www.sitepoint.com/colors-json-example/, copied and replaced the values but it's not functioning. Can anyone shed some light o ...

javascriptjson

Hover over parts of an image to bring attention to them

I am interested in developing a webpage featuring a black and white image of 5 individuals. When hovering over each person, I would like them to illuminate and display relevant information in a dialog box next to them. Do you have any tips on how I can ac ...

javascriptjquerycss

What is the most effective method of utilizing union or extend in TypeScript when faced with a comparable scenario?

I have a function that takes in two different types of objects: const canBeGenericOrDefaultData = { id: 123, pointData: { square: 'x145', triangle: 'y145' } } function submitHandler(canBeGenericOrDefaultData: AllTheDatas | G ...

javascripttypescripttypesinterface