Using Sencha Touch with Rails
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.