Category Archives: mobile

Configuring Layout Animation in Sencha Architect

18 Sep 2013

If you’ve ever trolled through Sencha Touch’s documentation you know how frustrating it can be – they assume that the reader is as proficient with Ext as the Sencha writer who created the doc. There are little to no code samples and what there is is usually provided by the community via the in-documentation commenting system. My assumption here is that the docs are generated from the commented source where one wouldn’t go into such detail thus what we have to work with.

One thing that you’ll likely have to research is configuring layout animations. The “showAnimation” and “hideAnimation” card properties each take a configuration object which the docs on those two properties shed no light on, among others.

Searching for “animation” within the docs reveals few clues among them a list of the animation types but again without further detail. The following is the list though you’ll soon see that some are yet to be implemented while others are iOS-only and one has its config properties completely commented out/disabled in the source:

  • cover
  • cube
  • fade
  • flip
  • pop
  • reveal
  • scroll
  • slide
  • wipe

Default Configs

Its nice to have a list but with no code samples readily available you’re forced to dig deeper into the docs and even into the source to see how to use the animations. I’ve gone ahead and done the digging and have compiled my own documentation on the topic and provided it all below.

There are a handful of config options (as can be seen here) but you’ll largely ignore them and use their default values. The defaults are:

from: {}

The default is empty object, otherwise an object containing CSS values that the animation begins with. If you define a CSS property here, you must also define it in the “to” config. For example:


to: {}

The default is an empty object, otherwise an object of CSS values that the animation begins with. If you define a CSS property here, you must also define it in the “from” config. For example:


duration: 250

The duration (number) of the animation in milliseconds. The default value is 250ms.

delay: 0

Delay (number) prior to starting the animation in milliseconds. The default is 0ms.

easing: ‘ease-in-out’

A string defaulting to “ease-in-out”. Valid values are “ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out” or a cubic-bezier curve as defined by CSS.

autoClear: true

A boolean defaulting to “true” where it will remove all custom CSS defined in the {@link #to} config when the animation is over.

out: true

Boolean, true if you want the animation to slide out of the screen.

direction: null

A string indicating the direction of the animation. Valid values are “left”, “right”, “up”, “down” and null. The default is null.

reverse: false

Boolean, “true” to reverse the animation direction. For example, if the animation direction was set to ‘left’, it would then use ‘right’. The default is false.

A quick reference chart

Below is a table showing the animation type support available in Sencha Touch 2 across iOS and Android

Animation Type Platform Support
Animation Type N/A iOS Android
cover X
cube X
fade X X
flip X
pop X X
reveal X
scroll X
slide X X
wipe X

Example Configs

And here are some sample configs for each animation type – note the inclusion of only those configs that are commonly used.


Not yet implemented.


Note that this does not work in Android.

Many of the config properties are commented out in the source. As a result below is all you can currently do to achieve a “cube” animation unless you edit the source itself and even then your mileage may vary (this is currently not a “cube” animation at all in Win Chrome 28 but some sort of cross wipe):


And with the duration configured:

    duration: 250 // 250ms is the default,


A “fade” animation configuration object at minimum appears like so:

    type:'fade' // duration will default to 250ms

Here is a config object with other useful properties added

    duration:250, // in milliseconds, this is optional, the default value is 250
    out: false // boolean - determines if a "fade out" animation should occur this is hard to distinguish from "fade in"


Does not work in Android.

The minimun, as in the others, is just a config object with the “type” property set to “Flip”.


Additional settings – note that the “right” direction property value behaves the same as “left”.

    duration: 250, // 250ms is the default
    direction: 'left' // left (default), right (behaves as "left"), up, down


The minimum config object to get a “pop” animation:


Among the other config properties is the “scaleOnExit” property which is optional and defaults to true – the settings used for true/false of this property imply the following within the framework:

  • if true then:
    • toScale = 0.01
    • toOpacity = 0
  • if false then:
    • toOpacity = 0.8

A sample config with other properties:

    type:'pop',// "pop", for show animations, "popOut"for hide animations
    duration:250, // 250ms is the default
    out: false, // default is false
    scaleOnExit: true // default is true


Not yet implemented.


Not yet implemented.


The minimum “slide” config:


With additional config properties:

    type: 'slide',
    duration:250, // 250ms is the default
    direction: 'up', // left, right, up, down, null
    cover:true, // boolean
    out:true, // boolean
    reveal:true // boolean


Does not work in Android. Apparently this is resource intensive as Sencha says it is best used on small displays (not tablets). This has no config options. The duration is 500ms.

(Doesn’t appear to be functional in Windows, Chrome 28)


Creating Global Variables / Objects in Sencha Architect

14 Aug 2013

There will be many instances where you don’t want to use the Sencha data model just to store some variables – there are a couple of ways to do so within Sencha Architect that are easy to do.

The first one is simply to add an external javascript file to the project’s Resources. Anything in your JS will be available to the entire app. While this works it has the potential to get messy so you’ll want to namespace everything in your custom.js document to prevent cluttering up the global namespace.

Sure that works in a pinch but lets try to add the desired global variable to the app’s namespace instead. This is essentially just like adding a custom property to any component but in this case you’re going to add it to the application itself. The app is represented by the “Application” root node in the Project Inspector. Once added the only issue then is to discover how to reference the “variable” (in quotes because what we’re really doing is adding a custom property to our Ext.application config object). Its not really an issue since as you’ll see its quite simple to determine.

To demonstrate, I have a simple app that will display a single button. When that button is pressed it will display our new property and then increment it. So then, our app looks like this:


To begin lets create a new Ext.application property that we’ll call “myNumber”. Locate the Application node in the Project Inspector and select it. The config panel updates to reveal the application’s config options. Enter the text “myNumber” in the filter field as illustrated below:


Next, click the “Add” button to the right of the filter text field. You will see this:


You’ve just created a custom property called “myNumber”. Now lets give it a value, in its default state the type of the property is a string as indicated by the icon to the left of the property (a circle with three horizontal dots). We want to change this to a number. Click the icon and select the “number” data type. The type icon should now contain a hash (#).


Next, set the value of the “myNumber” property to 0 (zero).

You may have noticed the other data types that were available for you to choose from – you can set the value to be an array of strings or objects or whatever may be necessary to meet your particular needs. For now, we just want our “myNumber” property to hold the number 0.

Ok, lets start wiring things up. Lets add a simple event to our button. Select the button from the Project Inspector. Its config will appear – click the “plus icon” found to the right of “Event Bindings”.


Select “Basic Event Binding” from the options that appear. You will be asked to “Choose an event by name” – type the word “tap”, then click the finish button. You now have this:


You have bound a tap event to the button. The next step is to add the logic which includes referencing our myNumber “Global variable”. Double-click the tap event beneath the button in the Project Inspector. The code view for the event appears.


Add this code (note the comments):

// this is the reference to your global variable:
var myGlobal =;

// next lets populate the text field with the value of myNumber:

// finally, we increment our global variable:;

You should have the following:


Ok, so this is how we figure out how to reference our custom property – the name of your app can be found in the Application config – click the Application node in the Project Inspector panel and then scroll through the Application Configs until you find the “Name” property – in this case it’s value is “MyApp”. So then, any properties that you add in this fashion can be access via this syntax [ApplicationName].app.[variableName]. In this case it is

Note that the new property won’t actually be added unless you give it a default value so be sure to do so to save yourself some frustration.

All done, each time the button is tapped we update the text field with the current myNumber value as well as increment the myNumber property’s value.

Using the SliderFill Sencha Touch Plugin in Sencha Architect

08 Aug 2013

Sliders are pretty cool in Sencha Touch – what makes them cooler is the SliderFill plugin by Thomas Alexander. The plugin can be downloaded here:

Before SliderFill the sliders are minimalist – functional yet a tad bland:


After SliderFill – one small addition makes them much more appealing:


Adding the plugin to your Sencha Architect project is simple – there was one caveat that I encountered – an error within the plugin but it was easy to sort out. Lets walk through the various steps needed to add and use the plugin within Sencha Touch via Sencha Architect.

Create a Sample Architect Project

First thing is first – open Sencha Architect, create a new project and add a slider to your default view. I won’t walk you through that part but if you are lazy here’s a link to a sample project before the plugin was added. What we want is something simple so my example looks like this:


Download and Install the SliderFill plugin

Next, download the plugin (link is in first para above) and extract the contents. The archive has the following structure:

  • sliderfill
    • img/
    • src/
    • index.html
    • README

Curiously the README is empty – no worries – within the “src” folder are two files, what you want is the plugin itself which is called “SliderFill.js”. Copy that file and place it within the root of your project, or, if you like, create a plugins folder in your project root and place the file there. For this demonstration I’m just placing it in the project root.

Next you need to add the plugin to your project. Within architect look for the Project Inspector panel – in the screen caps provided here it is on the right. Scroll down to the bottom and look for the “Library” node. Once the plugin is added to the project it will appear as a child of that node.


To add the plugin, click the “plus” (+) icon as shown below and choose Resource > JS Resource:


You now have a new JS resource added to your project’s library. You can see a red exclamation indicator nexct to it indicating that it needs to be configured.


Select the JS library resource and its config will appear. All you need to do is to enter the path to the SliderFill.js file. As I just placed it in the project root all I need to do here is to add the file name.


Add SliderFill to a Slider

Now that the plugin is installed lets add the plugin to a slider. Select your slider from the Project Inspector. Its config options will appear.


The plugin property doesn’t exist in the config but we can add and configure it by typing the word “plugins” into the config search field and then clicking the “Add” button to create it.


We now have a new custom property within the slider’s config.


Lets set the property’s type by clicking the “type” button (to the left of the property identified by a circle icon with three dots) and choosing “Array”:


We now need to configure the plugin. The plugin will accept a configuration object which is comprised of two things: 1)The xclass that specifies the plugin, and 2) an array of class names to apply to each SliderFill background. I have a single slider handle so I’m only going to have a single class.

To add the config object click the “Edit” button that appeared to the right of the plugins property when you selected “Array” as the property type.


The editor appears:


I’ll add this object wrapped in an array literal:

    xclass : 'Ext.plugin.SliderFill',
    fillCls : ['my_custom_slider_bg']



…but one last thing – SliderFill Ver 1 currently generates an error:


Ok then, lets go fix it – look in your Project Inspector under the Library node where you added SliderFill.js. Double-click it to open the file as we’ve got a single line to add to fix the error:


As the error indicated lets go down to line 46. We want to go back up a couple of lines and add the following line *after* line 44 – but first we need to unlock the file – click the “Unlock” button:


Again, create new line after line 44, we will add the following code:

slider = Ext.getCmp('');

The code should look like this:


Save your project.

Style the SliderFill background

Almost done – we just need to setup some defaults and we need to specify a color for the SliderFill background. An easy way to do this is to attach a new style sheet to the project via the Library. So create a new css file, save it in the root fo your project as we did with SliderFill.js (or create a new folder for it if you like) and populate it with the following:

    margin-top:0.75em !important;
    background-image:-webkit-gradient(linear, left top ,left bottom, from(#0A3A86), color-stop(.5, #4C8DE7), color-stop(.95, #6BABF5), to(#0A3A86));
    z-index:1 ;

.x-draggable {

    background-image:-webkit-gradient(linear, left top ,left bottom, from(#8b1a05), color-stop(.5, #e35e4f), color-stop(.95, #e18080), to(#6f2c22));

Note that last style – my_custom_slider_bg thats the class name we specified in SliderFill’s configuration object.

All that is left is to attach the style sheet. The process is the same as what we did to add SliderFill.js, except this time we will add a Style Sheet instead (note that this is a quick and dirty way of doing things – perfectly functional though if you’re familiar with SASS then you’d likely prefer to do it that way).


Select the CSS node underneath the Library and enter the path to your CSS – in my case my CSS file is called SliderFill.css.

Save your project and preview – you should see this:


Has your design view in Architect gone blank?

Sencha Architect V2.2.2 has a bug where if you add the plugin attribute to the view config the WYSIWG Design View will become completely blank as you can see in one of the above screen captures.

There are a couple of ways around this – the one I think I prefer is to create an onSliderfieldInitialize event in the controller which will apply the plugin to every slider that is initialized within your app.

To do this follow these steps:

  1. Click on your Controller node within the Project Inspector
  2. Next, Locate “Actions” and click the “Plus” button to the right
  3. Select “Controller Action” from the pop-up
  4. Next choose “Ext.field.Slider” as the target type
  5. Then select “initialize” as the event name

Architect will create the new event and display the editor for it – paste in the following code:

    xclass : 'Ext.plugin.SliderFill',
    fillCls : ['my_custom_slider_bg']

That’s it, now **every** slider that you add will have SliderFill applied to it and Architect’s 2’s Design View won’t go completely blank on you.

Regular Expression Method Fails on UA Strings

06 Jun 2013

This caught me at first – but upon closer inspection it makes sense – I was writing something that was looking at the User Agent of a device to see if it was Android using the “test” regex method and got the opposite result from what I was expecting. I expected that the “test” regex on the UA for the word “Android” would return true but instead I always got false. Here’s an example:

var isAnd = /Android/gi;

On the surface this should be true, yet it returns false in the console. See this next example:

var isAnd = /Android/gi;

Now the above returns true – something in the UA string is breaking the test. Here are the UA’s that I’ve tried with the above:

  • Galaxy Tab 2: Mozilla/5.0 (Linux; U; Android 4.1.1;en-us; GT-P5113 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
  • Nexus 7: Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19

On a whim I remove the forward slashes and perform the following test:

var isAnd = /Android/gi;
console.log(isAnd.test('Mozilla5.0 (Linux; Android 4.1.1; Nexus 7 BuildJRO03D) AppleWebKit535.19 (KHTML, like Gecko) Chrome18.0.1025.166  Safari535.19'));

Ah, this is what we’re looking for, that test works. So in order to do a successful pattern match using the “test” regular expression method on the User Agent string you would have to first remove all instances of “/” or escape them with a backslash (\/).

In Regular Expressions certain characters have a special meaning – I would think that a string that the regex is being run on would be immune but that’s apparently not the case. Forward slashes are used to create regular expression literals and if present within the string, well…. who knows what happens, presumeably its interpreted as another regular expression – and then things just won’t work. For that reason forward slashes need to be escaped with another character that has a special meaning in regular expressions – the backslash. So, this “\/” actually represents a single literal forward slash.

Yeah, this gets a little messy, you could do one of two things. You could clean the UA string first by using something like this (which, btw, is a little aggressive but is a good example of what you can do):

var str = 'some big string that needs to be "cleaned"';
str.replace(/([\[\]\*\^\&\$\.\(\)\?\/\\\+\{\}\|])/g, "\\$1");

Or, and I like this approach a lot for this particular application, you could just use a different method entirely, such as the “search” regex method, which is impervious to this situation:

var ua = navigator.userAgent.toLowerCase();
console.log('android') != -1)

And this gives us the predictable “true” as a result.

Launching the Facebook & Twitter Websites From a Web App

25 Mar 2013

Creating a link within your mobile HTML5/web apps is exactly like creating a link that launches in a new window, you simply do the following:

<a href="" target="_blank"></a>

Or via JavaScript:

<script language="javascript">'');

The above does what one would expect in most cases – launching the URL in the device’s mobile browser. However, on iOS if we are trying to go to a Facebook or Twitter site such as in this example:

<a href="" target="_blank"></a>

…and the Facebook App is installed on the iOS device the Facebook App itself will launch instead and present the Facebook login screen – which is not what we want to happen. In this case getting around this iOS quirk is easy – create a proxy page on a server of your choice that will redirect Mobile Safari to the desired location.

For example you might have a link like this one within your web app:

<a href="" target="_blank"></a>

Given the above your proxy page would contain a single line of JavaScript:

document.location.href = ''; // go to the branded pepsi facebook page

Pretty simple… but in my specific example I want to have a single proxy page handle multiple Facebook and Twitter cases. Given this information the link within my web app looks similar to this:

<a href="" target="_blank"></a>

The convention that I’ve setup here is that I have a link to a specific brand (“b”) whose branded social network (“sn”) website that I want the user to go to. In my “redir.html” document I have some simple JavaScript to inspect the URL’s name/value pairs and thus branch to the desired brand’s specific social network website based on that information.

<script language="javascript">
  var loc = document.location.href.split('?');
  var args = loc[1].split('&');
  var brand = args[0].split('=');
  var sn = args[1].split('=');
  if (brand[1] == 'abc'){
    if (sn[1] == 'fb'){
      // go to the brand's facebook site
      document.location.href = '';
    } else if (sn[1] == 'tw'){
      // go to the brand's twitter website
      document.location.href = '';
  } else if (brand[1] == 'xyz'){
    // etc...
  // etc.....


All content © 2012-2017.