Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A tool for rendering ORM-schemas and records to JSON for use with javascript code.

Fetching latest commit…

Cannot retrieve the latest commit at this time



A collection of helpers, MVC mixins and PORs (plain-old-ruby-object) to assist with auto-generating ExtJS javascript component definitions.


% gem sources -a (you only have to do this once)
% sudo gem install extjs-mvc

In environment.rb do |config|
require 'extjs-mvc'

An ActiveRecord mixin: ExtJS::Model

include it in your model. Use the class-method extjs_fields to specify those fields with will be used to render the field-def'n.

class User < ActiveRecord::Base
  include ExtJS::Model

  extjs_fields :exclude => [:password, :password_confirmation]

In script/console

>> User.extjs_fields
>> User.extjs_record
=> { "idProperty"=>"id", "fields"=>[
     {:type=>:int, :allowBlank=>true, :name=>"id"},
     {:type=>:string, :allowBlank=>false, :name=>"first"},
     {:type=>:string, :allowBlank=>false, :name=>"last"},
     {:type=>:string, :allowBlank=>false, :name=>"email"}

An ActionController mixin: ExtJS::Controller


class UsersController < ActionController::Base
    include ExtJS::Controller

View Helper: ExtJS::Helpers::Component


class UserController < ActionController::Base
  include ExtJS::Controller
  helper ExtJS::Helpers::Component

Now render Ext components using helper method extjs_component

@viewport = extjs_component(
  "xtype" =&gt; "viewport",
  "frame" =&gt; true,
  "layout" =&gt; "border")
@viewport.add("xtype" =&gt; "panel", "contentEl" =&gt; "hd", "region" =&gt; "north", "height" =&gt; 30)
@viewport.add(:partial =&gt; "/users/grid", "itemId" =&gt; "users-grid", "region" =&gt; "west")
@viewport.add(:partial =&gt; "/tasks/grid", "itemId" =&gt; "tasks-grid", "region" =&gt; "center")
@viewport.add("xtype" =&gt; "panel", "contentEl" =&gt; "ft", "region" =&gt; "south", "height" =&gt; 20)

Note how it can also render partials. Partials will be invoked with a local-variable named “container”, a reference to the parent Ext::Component instance which added the partial. If no “container” is specified, it would be expected that your partial would provide its own “renderTo” or “contentEl” property, just as in Ext.Component from ExtJS javascript library.

View Helper: ExtJS::Helpers::Store

Renders an with helper method extjs_store

class UserController < ActionController::Base
  include ExtJS::Controller
  helper ExtJS::Helpers::Store

@store = extjs_store(
  :controller => "users",
  :proxy => "http"  # <-- default
  :format => "json" # <-- default
  :model => "user", # <-- default: controller_name.singularize.camelize.constantize
  :writer => {:encode => false},
  :config => {      # <-- standard config-params
    "autoLoad" => true
    "autoSave" => true

%= @store.render %

Note on Patches/Pull Requests

  • Fork the project.

  • Make your feature addition or bug fix.

  • Add tests for it. This is important so I don't break it in a future version unintentionally.

  • Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but

    bump version in a commit by itself I can ignore when I pull)
  • Send me a pull request. Bonus points for topic branches.


Copyright © 2009 Chris Scott. See LICENSE for details.

Something went wrong with that request. Please try again.