Ordered Attributes

I released my first Ruby on Rails plugin today. It is actually helpful for building Ext JS grids! More on that later in an extra post. Below some information about the ordered attributes plugin (taken from the README file).

Ordered Attributes
This Ruby on Rails plugin provides a way to order ActiveRecord attributes for using them for csv exports or automated
table generation.

Installation
git clone git://github.com/steffen/ordered_attributes.git vendor/plugins/ordered_attributes
or if you are on edge rails
script/plugin install git://github.com/steffen/ordered_attributes.git

Example

class Person < ActiveRecord::Base
  
  attr_order :name, :street, :zip, :city
  
  attr_groups :address => [:street, :zip, :city],
              :birth => [:date_of_birth, :place_of_birth], // you can use %w(date_of_birth place_of_birth) as well
              :all => [:name, :address, :birth]
  
end

Use the ordered_attributes method to get the ordered attributes:

Person.ordered_attributes
=> [:name, :street, :zip, :city]

Person.ordered_attributes(:all)
=> [:name, :street, :zip, :city, :date_of_birth, :place_of_birth]

See spec/ordered_attributes_spec.rb for more Examples!

Ext JS 2.1 with (more-or-less) first-class REST support released

In case you missed it, yesterday the Ext JS Team released version 2.1 of it's impressive Javascript library.

Besides nice new widgets such as the slider and statusbar, and big performance improvements, the Ext JS library is now supporting the PUT and DELETE http verbs (besides GET and POST) when using their Ext.form.Action class for Ajax Requests. But is that helping us Rails developers? Not really, since most browsers haven't first-class support for PUT and DELETE (yet). Rails uses a work-around for this problem. If you, for example, create a form tag with the PUT method, it creates an hidden form field with name _method and the http verb as value. Therefore you actually have to add this hidden form field in your Ext form manually and continue using POST as method.

Here is their blog post with all infos about this release and other news (such as a new ext js website with more examples!)

Btw, they also show a preview of Ext JS 3.0, which includes a performance-optimized datagrid view. I recently addressed/solved the performance issues in my PrinterGridPanel class included in my PrinterFriendly extension, which is meant for printing and has therefore less view-features.

Ext.ux.PrinterFriendly, 0.2

I hope nobody minds if I post some update announcements for my Ext JS extension here in my blog. The next Rails-specific post is coming soon...

Here are the changes for version 0.2:

• Added config.js file for customized settings


• Added Ext.ux.PrinterFriendly.ENABLE_SHORTCUTS config option


• Added Ext.ux.PrinterFriendly.ROOT constant


• Added x-grid3-cell-first and x-grid3-cell-last class to header cells


• Added config parameter to printPreview to set config options for the print preview window, i.e. the title


• Added 'printer-window' id for printer window


• Added init.js file, which loads dynamically all other required files


• Added closeText and printText config option to PrinterWindow for localization purposes


• Added hiding of body until the printing layout gets initiated, this way the user doesn't see the page without the custom printer css, which the user might add in the onPrinting function


• Removed Ext.PRINTER_FRIENDLY_CSS_URL constant


• Changed all internal extensions to use Ext.ux.PrinterFriendly namespace


• Changed name of format parameter from format to _format, since it conflicts with the format parameter in Ruby on Rails


• Changed loading of printer friendly css file, will be loaded now when loading js scripts, which prevents the user from seeing the page before the css is loaded


• Fixed error in Safari in addStyleSheet method which caused that onPrinting is not executed


• Fixed print button for IE, IE is printing the content of the iframe now


• Fixed css bug in IE, empty cells will be filled with now, so that the css border is shown
  

The files can be found here.

Ext.ux.PrinterFriendly, 0.1 (Initial Release)

I'm happy to announce the first release of my (first) Ext JS extension.
Here are the facts:

Name
Ext.ux.PrinterFriendly

Version
0.1 (Initial Release)

Summary
Easily build printer friendly layouts and grids for your Ext JS pages.

Features

• Builds a normal html table (Ext.ux.PrinterGridPanel) based on your data store and column model, which saves a lot of cpu power and memory when printing large data sets. Moreover it shows all rows. (Remember, you can't use ext's pagination or scrolling on paper. ;-))
  


• Remembers the state of your grid, such as that hidden columns stay hidden in printer friendly view, keep their column order and keep the row sorting. (This is not really a feature of this extension, it just uses the fabulous Ext.state.Manager, but I think it's important to mention, since this was an important requirement for me.)
  


• Completely Javascript-driven, no need for extra server-side coding for printer friendly pages
  


• Enables easy debugging of your printer-friendly layout (just add ?format=printerfriendly to your page url to see printer friendly view)
  


• Enables adding your custom stylesheet for your printer-friendly format

Source
See attachments on this post (in the Ext JS Forum).

Documentation
http://extjs.com/learn/Extension:PrinterFriendly

Example
See attachments on this post (in the Ext JS Forum).

Feedback
Any Feedback via comments on this post in the official Ext JS forum or in this blog is welcome!

I hope you find this extension as useful as I do! :-D

Regards,
Steffen

Ext JS Screencast (Sketchcast) about Ext.extend and Ext.override

Jay Garcia from TGD innovations LLC started doing a series of screencasts (or so-called sketchcasts) about Ext JS. Here's his second one about Ext.extend and Ext.override. It's certainly an interesting way of doing a screencast using a (digital) whiteboard.



Check out his Blog at http://tdg-i.com which also includes some nice explained Ext JS examples.

Fitting Ext JS into the Rails architecture

When you start building your first Ext JS page into your Rails application, you certainly will wonder where to put the Javascript code.
Instead of just creating a javascript file such as posts_show.js in your public/javascript directory, here is a more elegant way for adding Ext JS pages to your Rails (2.0.2!) project:

# app/controllers/post_controller.rb

def show
  @post = Post.find params[:id]

  respond_to do |format|
    format.html { render :layout => "extjs" } # *
    format.js
  end  
end

# *) special extjs layout which includes the required extjs files,
#    in case you have a different default layout for non-Ext JS pages 


# app/posts/show.html.erb

<%= javascript_include_tag formatted_post_path(@post, :js) %>

# app/posts/show.js.erb

Ext.onReady(function(){
  // your ext js javascript code here
  // because this file is rendered via the erb renderer,
  // you can add ruby code such as:
  alert('<%= @post.title %>');
});

Inspecting your Ext.onReady variables

In the Ext JS examples included in the Ext JS package, you'll find usually this code:

Ext.onReady(function(){
  ..
  var store = new Ext.data.SimpleStore({
    ..
  });

  var grid = new Ext.grid.GridPanel({
    store: store,
    ..
  });
});

Notice the var keyword in front of the declared variables! The var keyword is defining the variables as local variables. They are only existing in the scope of the anonymous function which is passed to the Ext.onReady method.
But what if we'd like to inspect the values of our local variables in firebug? We could set a breakpoint inside our anonymous function which will allow us to inspect these local variables. But it's a little annoying to do that everytime we're working on an Ext page.

Well, we just could remove the var keyword or use this.store. But that would clutter up our global scope which isn't that nice.

Here is a better solution I came up with today:

Ext.screen = {}

Ext.onReady(function(){
  var s = Ext.screen;
  ..
  s.store = new Ext.data.SimpleStore({
    ..
  });

  s.grid = new Ext.grid.GridPanel({
    store: s.store,
    ..
  });
});

With that solution all our local variables can be referenced by Ext.screen.variable in our firebug console, while keeping our global scope clean by using the Ext.screen namespace.