Tag Archives: Ext JS 5

Sencha Ext JS 5: Supporting Different Themes for Different Devices

Sencha Ext JS 5 is the first version of the Ext framework to fully support iOS tablets.

Perhaps the most important task  that you’ll need to do in order add tablet support to your application is to automatically switch between desktop and touch-based themes (CSS files), depending on the type of device being used.

This tutorial demonstrates how to add this capability to your application.

Step 1: Create the App

  1. Open a command prompt to your Ext JS 5 folder
  2. Run the following command:
    sencha generate app TestApp ../TestApp

Step 2: Define the Themes

  1. In your command prompt, change directories to the TestApp folder.
  2. Enter the following commands:
    1. sencha generate theme TestApp-Desktop
    2. sencha generate theme TestApp-Tablet
  3. Using your editor, open /TestApp/packages/TestApp-Desktop/package.json
  4. Modify the “extend” property to extend ext-theme-neptune.
  5. Save the file.
  6. Using your editor, open /TestApp/packages/TestApp-Tablet/package.json
  7. Change the “extend” property from ext-theme-classic to ext-theme-neptune-touch.

Step 3: Modify your App.json file to support multiple platform builds

  1. Using your editor, open /TestApp/app.json
  2. Add a “builds” property as illustrated here:
    "builds": {
        "testAppDesktop": {
            "theme": "TestApp-Desktop"
        "testAppTouch": {
            "theme": "TestApp-Tablet"

Step 4: Modify your output definition to create multiple application manifests

Replace the output config property in your app.json with the following:

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
    "page": "./index.html",
    "manifest": "../${build.id}.json",
    "deltas": {
        "enable": false
    "cache": {
        "enable": false

Step 5: Refresh your App

Return to your command prompt and type the following:
sencha app refresh

This will generate two manifest files: testAppDesktop.json and testAppTouch.json

Step 6: Replace the CSS config in the App.json

Replace the css configuration property in your App.json with the following:

"css": [{
    "path": "${build.out.css.dir}/TestApp-all.css",
    "bootstrap": true

Step 7: Replace the bootstrap property to load the appropriate manifest file

"bootstrap": {
   "manifest": "${build.id}.json"

Step 8: Add the following code into a script tag in your index.html file, just above the microloader, to load the appropriate manifest:

var Ext = Ext || {};
Ext.beforeLoad = function(tags){	
    var theme = location.href.match(/theme=([\w-]+)/);
 	theme  = (theme && theme[1]) || (tags.desktop ? 'testAppDesktop' : 'testAppTouch');
    Ext.manifest = theme;
    tags.test = /testMode=true/.test(location.search);
    Ext.microloaderTags = tags;

Step 9: Build the Application

Return to your command prompt and type the following:

sencha app build development

Step 10: Test the Application in a Desktop and Mobile Browser

Fig Leaf Software’s Ext JS 5 Fiddles

We’ve been developing a bunch of Sencha Ext JS 5 examples lately, and we decided to share them with the community. Hopefully these will prove helpful to the newbies!