I’ve got an application that displays user notes in a GridPanel. These notes tend to be very long, but the default style for a cell is white-space: nowrap, which prevents word wrapping the contents. Sometimes simply expanding the column in the UI is enough, but if the note is long enough, it’s a clumsy fix.

I decided to extend the standard ColumnModel class to automatically wrap all cells in the grid, unless overridden (see below).

WordWrapColumnModel

Ext.grid.WordWrapColumnModel = Ext.extend(Ext.grid.ColumnModel, {

   initComponent: function(){
      Ext.grid.WordWrapColumnModel.superclass.initComponent.apply(this, arguments);
   },

   getRenderer : function(col){
      if(!this.config[col].renderer){
         if (typeof(this.config[col].wordWrap)=='undefined' || this.config[col].wordWrap==true){
            return Ext.grid.ColumnModel.wordWrapRenderer;
         } else {
            return Ext.grid.ColumnModel.defaultRenderer;
         }
      }
      return this.config[col].renderer;
   },

   onRender: function(){
      Ext.grid.WordWrapColumnModel.superclass.onRender.apply(this, arguments);
   }
});

Ext.grid.ColumnModel.wordWrapRenderer = function(value){
    return '<div style="white-space:normal !important;">' + value + '</div>';
};

Ext.reg('wordwrapcolumnmodel', Ext.grid.WordWrapColumnModel);

Usage

By using this column model class, all columns will, by default, wrap their text if the text length is greater than the width of the column. You can override this if you want any of the columns to not wrap by specifying the wordWrap: false config option.

var NoteColumnModel = new Ext.grid.WordWrapColumnModel([{
       id        : 'first_name',
       header    : 'First Name',
       dataIndex : 'first_name',
       width     : 100
    },{
       id        : 'last_name',
       header    : 'Last Name',
       dataIndex : 'last_name',
       width     : 100,
       wordWrap  : false
    },{
       id        : 'setup_date',
       header    : 'Created',
       dataIndex : 'setup_date',
       width     : 100
    },{
       id        : 'note_txt',
       header    : 'Note Text',
       dataIndex : 'note_txt',
       width     : 600
    }
]);

My shining star needs to stop growing up on me! These days, I wish kids came with a Stop Growing Up button that I can push anytime I want so that I can enjoy the little things that come with each new phase of their lives.

Beach Trip 2007

Beach Trip 2010

I was writing some code this morning for a demo application, and I kept getting an error in one part of my Flex code and I just couldn’t figure out what the hell was going on. Turned out, it was a symptom of how many different function declaration conventions I have to deal with.

It got me thinking about how many different ways do I write a function in one day. Let’s see…

-=  Java and C#  =-
public <type> myFunction([args])...

-=  Javascript  =-
function myFunction([args])...

-=  ColdFusion  =-
public <type> function myFunction([args])...

-=  Flex  =-
public function myFunction([args]):<type>

No wonder I confused from time to time.

It’s been a bit hectic at work in the last 2 years. Well, perhaps hectic isn’t the perfect word, but it’s close. Since I started working here, we’ve gone through two complete development technology stack switches.

Back in the halcyon days of 2007, I had the unenviable task of shoring up some very hastily written applications (by database developers and a couple of hacks who were here before me) using ColdFusion and HTML/Javascript. I beefed up the corporate offerings by implementing industry-accepted practices and patterns, used well-established libraries and got upgrades to the ColdFusion servers.

Then, in late 2008, the decision was made to scrap any future development of HTML/Javascript user interfaces and use Flex instead. That was exciting because of two reasons:

• I got to learn a cool technology like Flex
• I didn’t have to port any of my existing ColdFusion code to another language.

Fast forward to 2010 and now the entire company is rolling over to the .NET stack. Now I get to brush up on my rusty C# skills which I haven’t used in almost 4 years; I get to learn the ASP.NET MVC architecture; I get to have fun learning how to connect our .NET applications to our Oracle databases; lastly, I get to estimate how long it would take to convert our entire ColdFusion code base to .NET.

I’ll still get to work in ColdFusion from time to time, but .NET is the future…. for now.  Perhaps 2012 will be the year we convert everything to Java!

I’m all for rolling with the punches and evolving my skill set to match what is needed for the organization to be successful, but I’m also no longer 24 years old with oodles of free time at my disposal (or the accompanying mental agility). Doing these massive switches takes a little more time at my venerable age.

I was browsing around the Sencha site this morning and saw that they announced the beta release of 3.3 which includes two major new components:

• PivotGrids
• Calendar

While those will garner much attention, the ugly stepchild mentioned at the bottom of the press release is also very cool. The ActionColumn allows you to put icons inside a grid with an accompanying event handler.

This is something we use quite a bit in Flex, and its addition to ExtJS is exciting.