Skip to content
Using Sencha Touch with Rails
Latest commit b4ead2d Jun 18, 2015 @AlexVangelov Merge pull request #9 from zherk/master
Get the assets folder from the config, don't assume that it's /assets/
Failed to load latest commit information.
ext grand refactoring Dec 25, 2014
vendor/assets Get the assets folder from the config, don't assume that it's /assets/ Jun 18, 2015
.project v 2.0.1 include alternative mappings Dec 29, 2014
LICENSE.txt tune up config Dec 25, 2014


This gem provides:

  • Sencha Touch 2.4.1 GPL


Add this line to your application's Gemfile:

gem 'sencha-touch-rails'

And then execute:

$ bundle install

Keep in mind that Sencha Touch GPL is downloaded during the gem installation and can take a long time. You can monitor download progress by install it yourself as:

$ gem install sencha-touch-rails --verbose

The Sencha Touch files will be added to the asset pipeline and available to use.

Add to app/assets/javascripts/application.js:

//= require sencha-touch-rails

Add to app/assets/stylesheets/application.css (you can change the theme with your favorite)

*= require sencha-touch/themes/sencha-touch

To customize Sencha Touch, create app/assets/stylesheets/sencha-touch.scss and use:

@import 'sencha-touch/default';

@import 'sencha-touch/default/src/Class';
@import 'sencha-touch/default/src/Button';
@import 'sencha-touch/default/src/Panel';
@import 'sencha-touch/default/src/Sheet';
@import 'sencha-touch/default/src/MessageBox';
@import 'sencha-touch/default/src/Toolbar';
@import 'sencha-touch/default/src/Toast';
@import 'sencha-touch/default/src/Menu';
@import 'sencha-touch/default/src/carousel/Carousel';
@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/form/FieldSet';
@import 'sencha-touch/default/src/field/Field';
@import 'sencha-touch/default/src/field/Checkbox';
@import 'sencha-touch/default/src/field/Radio';
@import 'sencha-touch/default/src/field/Search';
@import 'sencha-touch/default/src/field/Select';
@import 'sencha-touch/default/src/field/Slider';
@import 'sencha-touch/default/src/field/Spinner';
@import 'sencha-touch/default/src/field/TextArea';
@import 'sencha-touch/default/src/dataview/IndexBar';
@import 'sencha-touch/default/src/dataview/List';
@import 'sencha-touch/default/src/picker/Picker';
@import 'sencha-touch/default/src/plugin/ListPaging';
@import 'sencha-touch/default/src/plugin/PullRefresh';
@import 'sencha-touch/default/src/slider/Slider';
@import 'sencha-touch/default/src/slider/Toggle';
@import 'sencha-touch/default/src/tab/Panel';
@import 'sencha-touch/default/src/grid/Grid';

You can include more icon styles by adding:

@include pictos-iconmask('wifi');

More about Sencha Touch Theming:

Simple usage with coffee script:

  name: 'Sencha',
  launch: ->
    Ext.create "",
      fullscreen: true,
      tabBarPosition: 'bottom',
      items: [
          title: 'Home',
          iconCls: 'home',
          html: "Home"
          title: 'Settings',
          iconCls: 'settings',
          html: "Settings"

An article about sencha-touch-rails:

Work in progress:

In production environment Ext.Loader is not able to load dependencies since they are not included in Sprockets. Even if we pass all Sencha Touch source files to sprockets and compile them, Ext.Loader is not compatible with production hashed file names. Workaround is to put manually Sencha Touch javascript sources in public/assets/sencha-touch. There should be a way to extract Ext dependencies list in ruby, then sencha-touch-rails will be able to add it as required assets for compilation. This way we should have an optimized application specific Sencha Touch framework in both development and production environments.

A hint:

You can see Sencha Touch loaded dependencies from browser's console by executing: for(i in Ext.Loader.history){ console.log(Ext.Loader.getPath(Ext.Loader.history[i])); } and add them manually to the application.js before going to production.

Something went wrong with that request. Please try again.