rss | twitter

Icons in Netzke Widgets

ExtJS and Rails With Netzke. Custom Widget Actions. Recent update to Netzke (the framework that helps you build ExtJS/Ruby-on-Rails applications) introduces support for FamFamFam Silk icons. All you have to do is download the icons and put them into your public/images/icons folder (so that the icons are accessible via http://yourhost.com/images/icons) - the next time you restart your Rails application, Netzke will detect the icons and start using them. As always, this update is reflected on the Netzke live demo page. And if you want to know how to customize the icons - read on.

Let's see how we can change the icons for the GridPanel. Inherit your customized grid panel from Netzke::GridPanel (see this tutorial for an example), and override the actions method, specifying custom icons for any of the available actions, e.g.:

module Netzke
  class Books < GridPanel
    def actions
      super.deep_merge({
        :add => {:icon => "/images/icons/book_add.png"},
        :edit => {:icon => "/images/icons/book_edit.png"},
        :del => {:icon => "/images/icons/book_delete.png"}
      })
    end
  end
end

Icons location in the application is configured by setting Netzke::Base.config[:icons_uri] to the relative URL to the icons (defaults to "/images/icons"). For example (at the end of your environment.rb):

Netzke::Base.config[:icons_uri] = "/images/iconz/"

Also note, that the icon option for an action is not specific to Netzke, it's just a valid configuration option for Ext.Action.