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
    }
]);