On Rails, Ext JS, Netzke, and nomadic lifestyle

Netzke-Core Update: Embedding Widgets Can't Be Easier
February 21, 2010

The Netzke project is now over a year old, and several developers have since then started using it in their projects, creating their own widgets and using the pre-built widgets from netzke-basepack. Recently, the netzke-core gem has been updated to version 0.5.0, and this update has simplified the way a Netzke widget gets embedded in your Rails application. First of all, no longer is it needed to define widgets in the controller - simply put them straight into your views using the netzke helper. All the AJAX communication between the client and server side of widgets will now be routed through the netzke_controller, which is a part of netzke-core. In this post I'll provide a couple of examples of embedding Netzke widgets into the Rails views. In case you haven't yet appreciated the simplicity and flexibility of the Netzke framework, then, hopefully, this post will get you hooked.

But first, let's see what's improved in the way we prepare our Rails application for using Netzke. In the layout, within the header tag, instead of all the previously used netzke-related helpers and includes of ExtJS, you may simply put netzke_init:

<%= netzke_init %>

This will include all the JavaScript and stylesheets needed to run ExtJS and Netzke, as well as provide for Ext.onReady call to render the widgets after the page load.

Provided you have the map.netzke line in your config/routes.rb, you may now directly include Netzke widgets in your views.


Using Netzke is probably the easiest and most flexible way of integrating a full featured Ext.grid.EditorGridPanel-based grid into a Rails view. See it as scaffolding with lots of extras (such as on-the-fly reconfiguration of your grid). The code in its simplest form looks like this:

<%= netzke :grid_panel, :model => "Boss" %>

In the need of deviating from the defaults, Netzke's GridPanel is very configurable. Just go here for live demo and comprehensive examples.


Netzke's FormPanel is almost as intelligent as GridPanel, in the sense that it provides for great defaults for the form fields, as well as flexible overrides and dynamic reconfiguration:

<%= netzke :form_panel, :model => "Boss", :record_id => Boss.first.id %>

In fact, if you have played around with Netzke's GridPanel, you've probably seen FormPanel in action, when editing records in the form, doing the search, doing the dynamic reconfiguration, etc.

Tab panel

Netzke's TabPanel (as well as AccordionPanel below) is an example of a widget that provides for dead-simple embedding of other widgets (with or without dynamic loading):

<%= netzke :tab_panel, :items => [{
  :class_name => "GridPanel", :model => "Boss"
}, {
  :class_name => "GridPanel", :model => "Clerk"
}] %>

Accordion panel

The AccordionPanel has similar configuration to the TabPanel:

<%= netzke :accordion_panel, :items => [{
  :class_name => "GridPanel", :model => "Boss"
}, {
  :class_name => "GridPanel", :model => "Clerk"
}] %>

A panel with the "border" layout

This widget I use very often for creating custom complex widgets, where different nested widgets interact in a certain way (see several tutorials on this blog). The example below simply provides a panel with 3 nested widgets:

<%= netzke :border_layout_panel, :regions => {
  :center => {
    :class_name => "GridPanel", :model => "Boss"
  :south => {
    :class_name => "Panel", 
    :ext_config => {:html => "Just a panel with text here"},
    :region_config => {:height => 100}
  :east => {
    :class_name => "FormPanel", :model => "Boss",
    :region_config => {:width => 300}
} %>


Recent update to Netzke made it possible to declare several Ext.Window-based widgets on a page: when a window is triggered shown, it dynamically loads the embedded widget. Here's an example of a window that embed a previously created complex widget (see the corresponding tutorial):

<%= netzke :window, :item => {
  :class_name => "BossesAndClerks"
} %>

See Netzke's window in action on the netzke-demo page.


So, could it be simpler than this? The examples above only give you a glance of what's possible. You may realize, for example, that Netzke allows for unlimited nesting of widgets (which wouldn't be possible without the powerful ExtJS architecture), each of which will "talk" to its own server side instance with minimum (or none, as in these examples) effort from the developer. If it doesn't sound a bit of a magic to you, then you've possibly not been working on complex Rails/ExtJS apps long enough :)


I realize that Netzke badly needs documentation and guides on developing new widgets. In mean while several brave people started using Netzke in their projects, going through reading Netzke code and the tutorials. They also have helped me significantly improve Netzke (thanks guys!). I plan on starting a community driven Netzke guides online project, which would allow to easily contribute a tutorial or two.

Besides that, Rails 3 is coming very soon, and compatibility branches of the Netzke-related projects will soon appear on the GitHub. Another idea is to set up a repository of community-contributed widgets (yes, there are a couple of them at the moment), which would not only be a source of different pre-built widget, but also an example of other developers' code.

As a very good starting point for getting into Netzke, many have chosen to clone the netzke-demo project and play with it in their development environment. Don't hesitate to join the Netzke Google Groups, subscribe to this blog, and/or follow me on Twitter.

comments powered by Disqus

Max Gorin

Web developer and digital roamer since 2008. Author of Netzke. Feminist, atheist, life hacker, and common sense devotee.

Twitter | GitHub | LinkedIn


  1. tutorials (14)
  2. netzke (26)
  3. rails (1)
  4. 0-7 (3)
  5. testing (2)
  6. videos (1)
  7. speaking (5)
  8. 0-8 (5)
  9. productivity (1)
  10. frontend (1)
  11. web-development (1)

By Year

  1. 2016 (1)
  2. 2015 (3)
  3. 2014 (2)
  4. 2013 (4)
  5. 2012 (5)
  6. 2011 (3)
  7. 2010 (6)
  8. 2009 (4)
  9. 2008 (1)