Sunday, April 24, 2011

First time with Netzke (ExtJS + Rails) Framework

1. Sources.
Netzke home page:
ExtJS download site:
Rails home page:

2. Create a small Netzke app.
I followed the article "ExtJS/Rails CRUD Application in 7 Minutes" from the Netzke home page.

$ cd ~/work/ruby/rails/
$ rails new netzke_task_manager && cd netzke_task_manager
      create  README
      create  Rakefile
      create  .gitignore
      create  Gemfile
      create  app
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/mailers
      create  app/models
      create  app/views/layouts/application.html.erb
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/secret_token.rb
      create  config/initializers/session_store.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  doc
      create  doc/README_FOR_APP
      create  lib
      create  lib/tasks
      create  lib/tasks/.gitkeep
      create  log
      create  log/server.log
      create  log/production.log
      create  log/development.log
      create  log/test.log
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/favicon.ico
      create  public/index.html
      create  public/robots.txt
      create  public/images
      create  public/images/rails.png
      create  public/stylesheets
      create  public/stylesheets/.gitkeep
      create  public/javascripts
      create  public/javascripts/application.js
      create  public/javascripts/controls.js
      create  public/javascripts/dragdrop.js
      create  public/javascripts/effects.js
      create  public/javascripts/prototype.js
      create  public/javascripts/rails.js
      create  script
      create  script/rails
      create  test
      create  test/fixtures
      create  test/functional
      create  test/integration
      create  test/performance/browsing_test.rb
      create  test/test_helper.rb
      create  test/unit
      create  tmp
      create  tmp/sessions
      create  tmp/sockets
      create  tmp/cache
      create  tmp/pids
      create  vendor/plugins
      create  vendor/plugins/.gitkeep
$ netzke_task_manager$

2. Edit Gemfile.
$ gedit Gemfile
The following three lines added to the Gemfile.
gem 'netzke-core', :git => "git://"
gem 'netzke-basepack', :git => "git://"
gem 'will_paginate', '~>3.0.pre2'
Be sure to add the last line to install will_paginate gem.

3. Install these gems.
$ bundle install
Fetching git://
remote: Counting objects: 5460, done.
remote: Compressing objects: 100% (2121/2121), done.
remote: Total 5460 (delta 3491), reused 4726 (delta 3015)
Receiving objects: 100% (5460/5460), 794.44 KiB, done.
Resolving deltas: 100% (3491/3491), done.
Fetching git://
remote: Counting objects: 7322, done.
remote: Compressing objects: 100% (2641/2641), done.
remote: Total 7322 (delta 4997), reused 6375 (delta 4268)
Receiving objects: 100% (7322/7322), 1.09 MiB, done.
Resolving deltas: 100% (4997/4997), done.
Fetching source index for
Using rake (0.8.7) 
Using abstract (1.0.0) 
Using activesupport (3.0.7) 
Using builder (2.1.2) 
Using i18n (0.5.0) 
Using activemodel (3.0.7) 
Using erubis (2.6.6) 
Using rack (1.2.2) 
Using rack-mount (0.6.14) 
Using rack-test (0.5.7) 
Using tzinfo (0.3.26) 
Using actionpack (3.0.7) 
Using mime-types (1.16) 
Using polyglot (0.3.1) 
Using treetop (1.4.9) 
Using mail (2.2.17) 
Using actionmailer (3.0.7) 
Using arel (2.0.9) 
Using activerecord (3.0.7) 
Using activeresource (3.0.7) 
Installing acts_as_list (0.1.2) 
Using bundler (1.0.12) 
Installing meta_where (1.0.4) 
Using netzke-core (0.6.7) from git:// (at master) 
Installing will_paginate (3.0.pre2) 
Using netzke-basepack (0.6.5) from git:// (at master) 
Using thor (0.14.6) 
Using railties (3.0.7) 
Using rails (3.0.7) 
Using sqlite3 (1.3.3) 
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

4. Create a link to ExtJS folder.
$ ln -s ~/work/extjs/ext-3.3.1/ public/extjs

5. Modify config/routes.rb file.
The following two lines are added to the file.
root :to => "welcome#index"

6. Remove the default index file and create a welcome index controller.
$ rm public/index.html
$ rails g controller welcome index
      create  app/controllers/welcome_controller.rb
       route  get "welcome/index"
      invoke  erb
      create    app/views/welcome
      create    app/views/welcome/index.html.erb
      invoke  test_unit
      create    test/functional/welcome_controller_test.rb
      invoke  helper
      create    app/helpers/welcome_helper.rb
      invoke    test_unit
      create      test/unit/helpers/welcome_helper_test.rb

7. Create a model.
$ rails g model Task done:boolean name:string notes:text priority:integer due:date
      invoke  active_record
      create    db/migrate/20110424232813_create_tasks.rb
      create    app/models/task.rb
      invoke    test_unit
      create      test/unit/task_test.rb
      create      test/fixtures/tasks.yml

Modify the 20110424232813_create_tasks.rb by adding "default => false" for "done" boolean field.

8. Migrate.
$ rake db:migrate
(in .../work/ruby/rails/netzke_task_manager)
==  CreateTasks: migrating ====================================================
-- create_table(:tasks)
   -> 0.0341s
==  CreateTasks: migrated (0.0342s) ===========================================

9. Edit /models/task.rb.
Insert the following two lines in the class Task.
validates_presence_of :name
 default_scope :conditions => {:done => false}

10. Modify /app/views/welcome/index.html.erb.
Replace the contents with the following single line.
<%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task" %>

11. Launch the server.
$ rails server
=> Booting WEBrick
=> Rails 3.0.7 application starting in development on
=> Call with -d to detach
=> Ctrl-C to shutdown server
[2011-04-24 23:20:26] INFO  WEBrick 1.3.1
[2011-04-24 23:20:26] INFO  ruby 1.9.2 (2011-02-18) [i686-linux]
[2011-04-24 23:20:26] INFO  WEBrick::HTTPServer#start: pid=23545 port=3000

12. Result


  1. I followed that tutorial and the same steps you have here but I get an error -- the first time I try to view. The tutorial uses Extjs 3.3. All I could find for download on their site is 4.0.1. I'm getting error:
    Do you think this has to do w/ the fact that I'm using extjs 4?
    I'm running ruby 1.9.2 and rails 3.0.7 on Ubuntu.

    1. It may require rails 3.1 at least.

  2. Nice information to provide the Ruby on Rails keep updating the postRuby on Rails Online Training Hyderabad

  3. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking.
    Ruby on Rails Online Training