ExtJS / Rails CRUD app in 7 minutes

Original author: writelesscode.com
  • Transfer
This post will show you simple steps to create a TODO web application using ExtJS, Ruby on Rails and Netzke. It will take you about 7 minutes, and if you are curious in advance whether it is worth it, see immediately the last part (by the way the largest), where we discuss the results. Our goal is to create a web application that will allow you to add, edit and delete TODO tasks, as well as mark done. In addition to this, you can sort and search for tasks, edit several tasks at the same time, and that's not all. You can track the time on your watch, let's get to work.


When this tutorial was written, I used: Rails 3.0.1, netzke-core 0.6.2, netzke-basepack 0.6.1, Ruby 1.9.2, Ext 3.3.0.

Initial steps


Creating a Rails Application:
> rails new netzke_task_manager && cd netzke_task_manager

Add Netzke Gems to Your Gemfile:
gem 'netzke-core', :git => "git://github.com/skozlov/netzke-core.git"
gem 'netzke-basepack', :git => "git://github.com/skozlov/netzke-basepack.git"

If you later see pagination-related errors, you may need to set will_paginate until I find a better solution:
gem 'will_paginate', '~>3.0.pre2'

Install gems:
bundle install

Connect the Ext library and, optionally, icons from FamFamFam, for example: Add Netzke and root routes:
> ln -s ~/code/extjs/ext-3.3.0 public/extjs
> ln -s ~/assets/famfamfam-silk public/images/icons


NetzkeTaskManager::Application.routes.draw do
  netzke
  root :to => "welcome#index"
  # ...
end

Create a welcome controller:
> rails g controller welcome index
Remember to delete public / index.html.

In the application’s layout, standard JavaScript and CSS links are replaced using the netzke_init helper, so the result will look something like this:
Netzke Task Manager
  <%= netzke_init %>
  <%= csrf_meta_tag %>


<%= yield %>



Note that netzke_init is all you need to connect Ext and Netzke JS and CSS files.
3 minutes have passed, we are ready to start the really interesting part.

Model creation


Let's create a Task model with the name, priority, notes, due date fields and the done flag:
> rails g model Task done:boolean name:string notes:text priority:integer due:date
Edit the migration file (db / migrate / xxx_create_tasks.rb) so that the done flag is cleared by default:
t.boolean :done, :default => false


Let's make changes to the database:
rake db:migrate

We want our tasks, at least, always have some kind of name, so let's add the appropriate validations. And set default_scope to get only incomplete tasks:
class Task < ActiveRecord::Base
  validates_presence_of :name
  default_scope :conditions => {:done => false}
end

Adding Netzke grid panel


In order to see the Ext table as an interface to our model, we do not need to make much effort. Just declare Netzke GridPanel in app / views / welcome / index.html.erb:
<%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task" %>

Let's start the server:
> rails s

... and see how it looks on localhost : 3000 /:

This is all quite functional, and it looks decent at the same time. In a minute I will show you an impressive list of features that you have. But first, let's tweak the application a bit to make it look even better - we still have time for this.

With Netzke :: Basepack :: GridPanel, you can easily configure columns (see the documentation for this). Let's do 2 simple things: 1) indicate which columns we want to see, excluding the created_at and updated_at rails created by default, and 2) change the “due” column heading to “Due on”.
<%= netzke :tasks,
  :class_name => "Basepack::GridPanel",
  :model => "Task",
  :columns => [:done, :name, :notes, :priority, {:name => :due, :header => "Due on"}]
%>

Excellent. Let's use the remaining 2 minutes for a final, purely visual modification. Let's display our table in the middle of the page, under the heading, without this thick blue header, and with a normal border around. We will also set the default width for some columns and make them occupy the entire width of the table.

In order to put the table in the middle of the page, let's quickly add some css styles to the layout of our application (after the netzke_init helper):

To add a name, turn on the frame and turn off the header:

Incomplete tasks

<%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task", :columns => [:id, :done, :name, {:name => :notes, :width => 200}, {:name => :priority, :width => 50}, {:name => :due, :header => "Due on"} ], # Standard Ext.grid.EditorGridPanel configuration options: :border => true, :header => false, :view_config => { :force_fit => true # force the columns to occupy all the available width } %>

Here it is! Stop your watch, and let's discuss what we got:


The discussion of the results


Since Netzke :: Basepack :: GridPanel is a very powerful component, we got a bunch of features for free.

Editing multiple lines at the same time

Adding, changing, and deleting records can easily happen like this:


Pagination

Even if your table contains tens of thousands of records, this is not a problem for the Netzke table, all thanks to the built-in pagination.

Context menu

Some of the actions of the buttons at the bottom of the table are duplicated in the context menu:


Automatically detect attribute types

In our application, we use fields with types integer, boolean, string, text, and date in the Task model - and each of the fields receives its own column type, the user will not be able to enter letters in the priority field.

Rails validation support

Rails validations are supported, and work even with multiple edits!


Server Side Sorting

Click on the column heading to enable server side sorting:


Server side filtering

Smart filters are enabled by default for each column, of course, given the type of column.
Date example:

Priority:


Adding / (multi) editing entries in the form

Sometimes adding / modifying a record is much more convenient using the form. Of course, Netzke has such an opportunity. Even multi-editing is supported, just select the required entries and click “Edit in form”.


Advanced Search Using Templates



And further...

This article is not covered, but the Netzke grid panel also supports one-to-many (“belongs_to”) communications (see the demo link below).

Conclusion


You have learned a small part of the things that Netzke provides, such as Netzke :: Basepack :: GridPanel, a powerful, customizable, and extensible component that you can use in your RIA applications. You can see more examples of using GridPanel and other components in the demo . Basically, Netzke was conceived as a framework that allows you to create your own powerful components - from scratch, or using existing ones.

Follow me on Twitter and find out about Netzke, and don't forget to bookmark the official website of the project .
Share Netzke Experience in the Google Group, and (last but not least), please remember: Netzke is a multifaceted project where a larger community will mean faster development. Thanks!

UPD d43 suggested where to see the demo with ExtJS 4.

Also popular now: