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.