Plugging ExtJS 4 themes into Rails 3.1

ExtJS 4 comes with a very nice collection of Sass theming code to make it very easy to modify the UI theme. The SDK comes with a sample theme, located at resources/themes/templates/resources/sass/my-ext-theme.scss. I have generally ignored the rails Sass and Sprockets (read this guide for more information on the Rails integration) but I decided now was the time to dive into these awesome tools.

My goal was to serve my own theme file directly from the app/assets/stylesheets directory. After a day or so of battling with this I got it to work, here is a short guide I put together.

Continue reading

Getting around in ExtJS

Ext is both a DOM querying and manipulation tool (like jQuery) and an application framework (like Backbone.JS or Ember.JS.) The DOM is a tree that represents the structure of a web page. Similarly, an ExtJS application forms a tree of UI Components. Ext provides a way to navigate this component tree that is very similar to DOM navigation with jQuery. Lets look at some examples, starting with DOM traversal:

// Find the first element with id "main"
// returns an Ext.Element object
Ext.get('main'); // equivalent to $('#main')[0];'main'); // same as get() but without caching

Fly is a bit confusing. It’s named for the flyweight pattern, it is meant to save memory. If in doubt, use Ext.get.

Continue reading

Getting started with ExtJS

With ExtJS there are a few different ways to write code, lets start with an example:

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {  // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{header: 'World'}],                 // One header just for show. There's no data,
        store: Ext.create('', {}) // A dummy empty data store

Here I’ve created a Window (this example was taken from the documentation) and inside the window is a grid. The grid is “lazy loaded”, it remains an object in the exact same format it’s written here in the Window’s items attribute. Only when show() is called will ExtJS initialize it. It uses a component registry to look up the xtype and map that to a Ext.grid.Panel. Now lets take another example:

Continue reading

Automatic handling of the Rails csrf-token with ExtJS

This is how I solved my issues with the Rails csrf-token using ExtJS

    try {
      app.csrfToken ="meta[name='csrf-token']").elements[0].getAttribute('content');

      // Ensure the Rails CSRF token is always sent
      Ext.Ajax.on('beforerequest', function(o,r) {
        r.headers = Ext.apply({
          'Accept': 'application/json',
          'X-CSRF-Token': app.csrfToken
        }, r.headers || {});
    } catch (e) {
      // console.log('CSRF protection appears to be disabled');