Sencha Touch Tips & Tricks

A random and ongoing collection of various tips and tricks encountered during development with Sencha Touch. Last tested version number is noted next to each, as things are sure to change in future releases.

1) Plan out CSS classes well and in advance ²⁺

Being able to apply classes to components at will allows you not to worry about element type in some of your CSS. Keep this in mind and build up a set of CSS class effects to use within templates, config, etc.

2) Don't be afraid of the source code, just don't edit it ^All

Make sure to always write code using debug versions, read the comments. Just don't edit it and expect to not deal with huge bugs when version updates are released.

3) Never underestimate the power of templates ²⁺

Member functions are particularly powerful, but be careful spending a lot of time outside the scope - otherwise list performance will suffer.

4) Limit ComponentQuery/DomQuery to improve performance ^2.1

Both functions (Ext.ComponentQuery.query/Ext.DomQuery.select) take a second parameter, which is the component or element to run the search on. This limits the number of times the selector needs to attempt matching, improving performance by a good amount.

5) Avoid classList, use element cls functions instead ^2.1

Android versions up to and including 2.3 do not support classList. Use elements cls functions instead, such as hasCls.

6) Create and use custom data types for models ^2.1

It's very easy to create data types for objects, arrays, and more.

7) Use email validation regex directly ^2.1

Ext.data.Validations.emailRe.test()

8) Make sure not to run minifiers on main Sencha CSS files ^2.1

The main Sencha Touch stylesheets already come compressed when generated from SASS or stock, however using something like yui-compressor will actually extract tiny bits of necessary style information. This could result in minor CSS bugs that are a huge pain to track down.

9) Close open pickers/overlays when handling back button ^2.1

Make sure that if a user hits the back button to navigate to another page, any open pickers/overlays are closed.

10) Don't put off learning and using SASS/MVC ²⁺

Both of these, while intimidating at first, will greatly speed up your development process. It is worth the initial time investment.

11) Avoid direct references from one controller to another ^2.1

The ideal way to do this is to have one controller fire an event on the application, and have the other controller listen for that event. This keeps code better organized and slightly improves performance.

12) Be careful with native lockscreens and timeouts/intervals ^2.1

Locking the screen on both iOS and Android devices can cause an interval to pause or keep running, depending on configuration. This might not be preferred, so make sure to test thoroughly.

13) Use advanced selectors in Component/DOM queries, such as :not ^2.1

Certain components (SelectField, for example) are picked up when doing ComponentQuery for textfield. To exclude these, try a selector like this: textfield:not(selectfield)

14) Scope problems? Bind your functions ²⁺

Ext.bind is a great helper function to get around scope issues. Simply wrap it around a function with a second parameter for the scope, just don't overuse it so you can ignore scope.