Home

Welcome to the extjs wiki!

extjs-mvc helps you auto-render ExtJS components and Stores with ruby helpers.

The javascript source behind this RESTful store example was written by hand. With extjs-mvc, one can render the same “user” Store like this:

<%= extjs_store(:controller => "users", :config => {"autoLoad" => true}).render %>

A store can be instantiated in irb console as well:

% store = ExtJS::Data::Store.new(:controller => "users", :config => {"autoLoad" => true})
=> #<ExtJS::Data::Store:0x1045e37b0 @format="json", "url"=>"/users.json", @proxy="http", @id="user", @controller=Users, @model=User>
% store.render

=>"new Ext.data.JsonStore({\“format\”:\“json\”,\“url\”:\“/users.json\”,\“fields\”:[{\allowBlank\,\“type\”:\“string\”,\“mapping\”:\“person.first_name\”,\“name\”:\“person_first_name\”},{\allowBlank\,\“type\”:\“string\”,\“mapping\”:\“person.last_name\”,\“name\”:\“person_last_name\”},{\allowBlank\,\“type\”:\“string\”,\“name\”:\“person_id\”},{\allowBlank\,\“type\”:\“string\”,\“sortDir\”:\“ASC\”,\“name\”:\“crypted_password\”},{\allowBlank\,\“type\”:\“string\”,\“name\”:\“salt\”}],\“messageProperty\”:\“message\”,\“root\”:\“data\”,\“successProperty\”:\“success\”,\“idProperty\”:\“_id\”,\“storeId\”:\“user\”,\autoLoad\);"

extjs-mvc is generic enough to work with both Rails and Merb, the gem will sniff-out which framework its being included into and auto-include the corresponding adapter for ActiveRecord, DataMapper or MongoMapper. While just three ORMs are supported, it’s very easy to define a new adapter; can be done in ~ 1/2 hour.

See tutorial and Example App

This simple application contains two auto-rendered stores named “user” and “task”, using the ActiveRecord adapter.

class User < ActiveRecord::Base
  include ExtJS::Model
  belongs_to :person
  extjs_fields :disabled, :person => [:first, :last, :email]
end

ExtJS::Model add a public method extjs_record to the class its included into. Open an irb console

% User.extjs_record
=> {"fields"=>[
         {"type"=>:string, "mapping"=>"person.first", :name=>"person_first"}, 
         {"allowBlank"=>false, "type"=>:string, "mapping"=>"person.last", :name=>"person_last"}, 
         {"allowBlank"=>false, "type"=>:string, "mapping"=>"person.email", :name=>"person_email"}, 
         {"allowBlank"=>true, "type"=>:string, :name=>"person_id"}, 
         {"allowBlank"=>false, "type"=>:boolean, :name=>"disabled"}, 
         {"allowBlank"=>true, "type"=>:string, :name=>"salt"}
   ], 
   "idProperty"=> :id
}