mvc

A collection of helpers, MVC mixins and PORs (plain-old-ruby-object) to assist with auto-generating ExtJS Stores (Ext.data.Store) including its associated DataReader (Ext.data.JsonReader, Ext.data.XmlReader) and DataWriter (Ext.data.JsonWriter, Ext.data.XmlWriter). Also contains a helper for rendering javascript component definitions via partials.

See tutorial www.extjs.com/blog/2009/09/30/ext-js-on-rails-a-comprehensivetutorial/

Installation

        % sudo gem install gemcutter
        % gem tumble   (only have to do this once, adds gemcutter as primary gem-source)
        % sudo gem install extjs-mvc

Rails Installation: In environment.rb,

    Rails::Initializer.run do |config|
        config.gem "extjs-mvc"
    end

Merb installation: In config/dependencies.rb, Add extjs-mvc as a new dependency

        dependency "extjs-mvc"

An ORM Model mixin: ExtJS::Model

extjs-mvc contains Model mixin named ExtJS::Model which works for three popular ORM frameworks, ActiveRecord, DataMapper and MongoMapper. The API for each framework is identical.

Simply include the mixin into your model. Use the class-method extjs_fields to specify those fields with will be used to render the Ext.data.Record.create field-def’n.

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

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

    # OR
    extjs_fields :name, :description

    # OR define a column as a Hash
    extjs_fields :description, :name => {"sortDir" => "ASC"}, :created_at => {"dateFormat" => "c"}

    # OR render associations, association-fields will have their "mapping" property set automatically
    extjs_fields :name, :description, :company => [:name, :description]

  end

After including the model mixin ExtJS::Model, try typing the following in irb console:

    >> 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 auto-generated Ext.data.JsonReader configuration!

An ActionController mixin: ExtJS::Controller

The extjs-mvc Gem includes a framework agnostic Controller mixin which works with both Rails and Merb. Include this mixin into any controller which will need to generate an Ext.data.Store. usage:

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

View Helper: ExtJS::Helpers::Component

usage:

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

Now render Ext components using helper method extjs_component

    @viewport = extjs_component(
      "xtype" => "viewport",
      "frame" => true,
      "layout" => "border")
    @viewport.add("xtype" => "panel", "contentEl" => "hd", "region" => "north", "height" => 30)
    @viewport.add(:partial => "/users/grid", "itemId" => "users-grid", "region" => "west")
    @viewport.add(:partial => "/tasks/grid", "itemId" => "tasks-grid", "region" => "center")
    @viewport.add("xtype" => "panel", "contentEl" => "ft", "region" => "south", "height" => 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 Ext.data.Store with helper method extjs_store

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

Now render a store in an erb template:

    @store = extjs_store(
      :controller => "users",
      :proxy => "http"  # <-- default
      :format => "json" # <-- default
      :model => "user", # <-- default: controller_name.singularize
      :writer => {:encode => false},
      :config => {      # <-- standard Ext.data.Store 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

Copyright © 2009 Chris Scott. See LICENSE for details.