Often when you run into an error when creating a Sencha Touch application, you can open up the console and find an error displayed along with the line number and file it occurred in. This makes debugging extremely easy and it should of course be the first thing you take a look at when you’re experiencing an error.
This isn’t always the case though and sometimes the errors are a bit more cryptic and do not give you much help in the way of how to solve them. This post will serve to list some of the more common errors and potential causes – I intend to continue updating this over time so if you think there’s anything that should be added to this list (whether you know the solution or not) please leave a comment below.
Application doesn’t load after dots disappear and is stuck on blue screen
This will happen quite frequently where the loading indicator dots will disappear (or perhaps they never do) but the application does not load and is stuck on a blank blue screen. This is usually because some error has occurred which stopped the application from loading properly.
Most of the time you should be able to open up the console and find some error that has occurred that should be pretty straightforward to fix. If not, perhaps some of the following advice may be able to help solve the problem for you.
Application loads in browser, but not on a device
Sometimes you will find that your application is working exactly as expected through your desktop browser, but when it is installed on a phone or some other device it no longer works. Whenever this happens, it’s usually because of one of the following reasons:
- When you install the application on a device you will likely either be creating a production or package build by running one of these Sencha commands:
sencha app build production```
or
sencha app build package```
It may be that the problem is with this build itself. Before installing it on the device, try viewing these builds directly through your desktop browser by navigating to ‘localhost/app/build/proudction/app’ or ‘localhost/app/build/package/app’ to see if they run properly.
- If you’re including some external resource in your application, i.e. some JavaScript SDK that is loaded in from a website, you may be running into a CORS “Cross Origin Resource Sharing” problem. Essentially, the application doesn’t want to load in an external resource because it could be unsafe but if you’re running it through your browser on your computer it will likely work.
If you’re using PhoneGap Build you can solve this by including the following line in your config.xml:
<access origin="*" />It’s better (safer) to specifically use the domain that you are loading the resource in from rather than the wildcard ’*’ which will allow remote loading from any domain.
If both of these were not the cause of your problem, try to take a look at what’s going on whilst the application is running on the device by using weinre.
‘Uncaught SyntaxError: Unexpected token ;’ or ‘Uncaught SyntaxError: Unexpected identifier’
These errors mean that there is a syntax error somewhere in your code. Almost every time this happens to me it’s because I either forgot to include a comma after a function before declaring the next one, i.e:
onSearchAction: function(field, e, eOpts){
} //<-- Needs a comma, should be },
onSearchReset: function(field){
}or I forgot to include a comma after declaring some configuration options like this:
items: [
{
xtype: 'searchfield',
docked: 'top',
itemId: 'search' //<-- A comma is needed here
name: 'search'
}
],So if you’re not sure where you’ve gone wrong, check those first. Of course, the syntax error could be anything though. You could have more opening brackets than closing ones, an extra semi-colon somewhere, you could be missing a comma and so on. If the console does not give you enough information to track it down, you can try to track it down by commenting out sections of code to narrow your search. This is why it’s best to test your code frequently, so you’re not searching through 10 different files for some small syntax error.
Uncaught TypeError: Cannot ready property ‘something’ of null
This error message is also pretty clear, it will occur when you’re trying to access some property or method of something that is null. You’re probably trying to access some value in a record for example, but for whatever reason the record isn’t being returned properly. Try using ‘console.log()’ on the record or view etc. that you’re trying to access and you will likely find that it doesn’t contain what you were expecting. Try and trace this back to figure out why this object is returning null.
[WARN][Anonymous][Ext.Loader] Synchronously loading ‘app.view.PersonList’; consider adding ‘app.view.PersonList’ explicitly as a require of the corresponding class
Although this one is just a warning, you may see it pop up from time to time and it’s best to handle this properly. The directions in the warning are pretty clear; this can be solved simply by requiring the class where necessary. In this case, I’m loading ‘app.view.PersonList’ which is used inside of my ‘People’ view. To require ‘PersonList’ I can add the following line to the view:
requires: ['app.view.PersonList'];Any other errors you think should be added to this list? Leave them below in the comments!