Many people who see the platform I’m helping create at Engage Software have commented positively on how different it looks to all the other software they have to use in their daily jobs. I therefore thought it would be nice to occasionally highlight certain areas of the platform that are achieved using ExtJS to show off what can be done with the right mix of components and a killer theme. Our ExtJS theme was conceived way before Neptune ever existed and has continued to evolve and improve.

In this article we’re going to take a little look at grids. More specifically we’re looking just at the rows in those grids – as that’s where most of the action happens! For now we’ll take a very high level view and in future articles I’ll reveal a little about how you can get some similar results.

If you’ve used ExtJS for any length of time, you’ll be more than familiar with their standard grid component:

Ext JS Paging Grid Example
Ext JS Paging Grid Example

A very powerful component with a ton of useful functionality baked right in. It’s a major factor in why we chose ExtJS in the first place – at the time they were street ahead of the competition. We wanted our grids to be far more powerful, beautiful and memorable that that though.

[adsense]

Grid rows
Our grids give users a wealth of information at a glance

Many of our grids follow a similar design language; User avatar and associated media over on the left, text content displayed next with some handy meta data beneath, then over on the right some handy, colour coded blocks give easy visual cues to important information. In the example above you may also notice the pink and orange flair on the top right corner of each grid row; these are displayed by a custom grid row column component I recently created to show records that are flagged in different states.

 

Grid rows
Coloured blocks in rows show users high level meta data

Notice also the little chevron over to the right of each row; this is a custom component derived from the ExtJS v3 Row Actions created by Jozef Sakalos many moons ago in ExtJS 3.x. I’ve enhanced it so users can click the chevron to reveal their row actions, thereby saving screen real estate.

 

Row action open showing actions and tooltip on hover
Row action open showing actions and tooltip on hover

Here’s a shot of the row actions opened up. Note the tooltips on each action are not your standard ExtJS tooltip – we’ve integrated qTip2 into ExtJS in order to provide a richer, more flexible tooltip experience. You will also notice that the row actions expand to cover the coloured blocks – the component dynamically works out it’s position and size depending on the columns you define. I’ll be showing you how you can create this component yourself in a future article.

That’s all for now – more to come in future articles including how you can create that handy little row actions component yourself in ExtJS 4.x

Please feel free to leave a comment.

Images of the EngageSciences platform are reproduced here with permission and remain property of Engage Software Limited.