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

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

In my sliding menu, each menu item contains a carousel with two items. I am trying to make the first carousel item show after closing and reopening the menu, or by clicking a button outside of the list on the menu page. This is my current setup: <ons- ...

javascriptcssangularjsonsen-ui

Creating Dynamic Tables with jQuery

I have written a code to fetch values using jQuery and Ajax. The data is coming fine but I am facing an issue with populating the rows in my table. The loop doesn't seem to work properly. Here is my HTML table code: <div class="panel-body"> ...

javascriptjqueryajax

The fuse-sidebar elements are not being properly highlighted by Introjs

I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...

javascriptcssangularintro.js

Issue: Error encountered while trying to use the removeAttribute() function in Selenium and Java: missing closing parenthesis after argument list

WebElement removeReadOnly=driver.findElement(By.xpath("//input[@id='mat-input-0']")); js.executeScript("document.getElementBypath('//input[@id='mat-input-0']').removeAttribute('readonly');",&quo ...

javascriptjavaseleniumselenium-webdriver

Is there a way to transform these into five columns within a single row using the Material-UI Grid system?

I'm trying to align 5 columns in one row, but I'm struggling to achieve the desired layout. Here is what I currently have: https://i.stack.imgur.com/d3z3n.png Any tips on how to make all columns appear in a single row? You can also view my att ...

javascriptreactjsmaterial-ui

The JSON object is not providing the length of the array, returning the value as

I'm currently fetching JSON data from a PHP file in the following manner: $.getJSON('fresh_posts.php',function(data){ global_save_json = data.freshcomments; var countPosts = data.freshposts; var howManyPosts = countPosts.length; ...

javascriptjqueryjson

The ng-switch function is not generating the desired code output

In my Ionic app, I have the following code snippet that I am currently viewing with ionic serve. However, when the initial ng-switch statement triggers... <span ng-switch="post.enclosure"> <span ng-switch-when="[]"> <p>def&l ...

javascriptangularjsionic-frameworkng-switch

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

Having difficulty viewing the images clearly

My JavaScript codes for scrolling images are not displaying all the images when viewed on Google Chrome. Is there a solution available? Below is the included JS code and CSS. data=[ [" images/img1.jpg"," Image1","pic01.jpg"], [" images/img2.jpg","Image2 " ...

javascriptcss

Encountering a Bad Request Response When Trying to Access WCF Service via Jquery Ajax

Encountered an issue when trying to call a WCF web service using jQuery Ajax, resulting in a bad request error without clear insight into the root cause. The service is not triggering any methods - neither success nor failure. Both the web service and the ...

javascriptjqueryajaxwcfiis

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...

javascriptreactjstypescript

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

Tips for transferring HTML code to a controller

Currently facing an issue while working with MVC and attempting to store HTML code from a view in a database field. In the JS section of my MVC solution, I have the following code snippet: var data = { id_perizia: $("#id_perizia").val(), pinSessione: $("# ...

javascriptjqueryajaxasp.net-mvc

Encountering the error message "Unable to access /" on the browser when using express router

Just started working with the express Router for the first time. Here is my route.js: var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.send('home page'); }); module.e ...

javascriptnode.jsexpress

Guide to uploading a JavaScript File object to Cloudinary via the node.js API

After researching various options, I decided to use cloudinary for uploading a file to an image server from my node js api. I successfully installed the npm package for cloudinary and implemented the code based on their api documentation Below is the fun ...

javascriptnode.jsfilecloudinary

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Stringification will not work on the virtual object that has been populated

Here is the object passed to the view: app.get('/view_add_requests', isLoggedIn, function (req, res) { var my_id = req.user._id; // this is the senders id & id of logged in user FriendReq.find({to_id: my_id}).populate('prof ...

javascriptjsonnode.jsexpressejs

How to use Express Validator to validate both email and username within a single field?

I am currently developing an application using the Express (Node.js framework) and I want to allow users to log in with either their email address or username. My question is, how can I implement validation for both types of input on the same field using e ...

javascriptnode.jsexpressexpress-validator

HTML not updating after a change in properties

My template is structured as a table where I update a column based on a button click that changes the props. Even though the props are updated, I do not see the template re-rendered. However, since I am also caching values for other rows in translatedMessa ...

javascriptreactjstypescriptreact-hooks