Wednesday, January 16, 2013

Customizing ExtJs Grid Components

Many ExtJs apps will eventually make use of the Ext.grid.Panel component. The grid component provides a quick and convenient method for showing large amounts of information. In my experience developing against the grid component goes something like this:
  • This grid component is great, it enables crud for my models out of the box with no coding effort!
  • We need to style this thing to not look like Excel 98.
    • Hmmm... styling is pretty tricky since everything is stuck in a table.
  • We need an extra feature, I bet it's easy to add to the grid with a plugin.
    • Hmmm... This extra feature conflicts with some of the grid's default behavior.
    • I guess we'll have to override some private methods to change the default behavior.
  • We need to upgrade Ext
    • Those custom styles are all overly dependent on the table layout, and they all broke...
    • Those overridden private methods have changed, and they all broke...
  • Ahhh, the grid sucks!
So how should developers handle customizing the grid? It turns out that Ext.grid.Panel uses an Ext.view.View component behind the scenes. Ext.view.View handles grabbing data from a store and rendering it to the dom, and keeping the two in sync. However, unlike the Ext.grid.Panel, it makes no assumptions about layout or behavior. Ext.view.View turns out to be one of the most useful components in Ext, because it provides the basic foundation a developer needs, but leaves all custom behavior up to the developer.

I suggest that any plans to create a heavily customized Ext.grid.Panel component should start with a  Ext.view.View instead. Even if you need to redevelop features present in Ext.grid.Panel, the flexibility to define your own layout and behavior will end up saving tons of time in the long run.