So I've read all about wrapping a column's text, which can easily be done by applying white-space: normal to the inner-cell. I then read about how hiding a column that had this CSS property set to it can screw up the grid... by screw up, I mean it makes the grid row's height very tall even if the current text in the row doesn't use all of the space. My work around for this came with using the listeners beforeshow and beforehide on the column.

All of this worked wonderfully until I ran into a problem with checkcolumn. This is the code that I'm using:

    <script type="text/javascript" src="ext.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
    <link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="examples/ux/css/CheckHeader.css">
      td.wrap div {
    white-space: normal;
  enabled: true

Ext.Loader.setPath('Ext.ux', 'examples/ux');

Ext.onReady(function() {
  Ext.define('model', {
    extend: '',
    fields: [
      {name: 'info', type: 'string'},
      {name: 'name', type: 'string'},
      {name: 'image', type: 'string'},
      {name: 'check', type: 'bool'}

  var store = Ext.create('', {
    model: 'model',
    data: [
      {info: 'blah blah blah', name: 'my name is a really long string that will not show up in this column', image: '', check: true},

  Ext.create('Ext.Viewport', {
    layout: 'border',
    items: [{
      region: 'center',
      xtype: 'grid',
      id: 'grid',
      store: store,
      tbar: [{
    xtype: 'button',
    text: 'Show Name',
    handler: function() {
      columns: [{
    header: 'Info',
    dataIndex: 'info'
      }, {
    header: 'Name',
    dataIndex: 'name',
    hidden: true,
    tdCls: 'placeholder',
    listeners: {
      beforehide: function(a, b) {
      beforeshow: function(a, b) {
      }, {
    header: 'Image',
    dataIndex: 'image'
      }, {
    xtype: 'checkcolumn',
    header: 'Check',
    dataIndex: 'check',
    listeners: {
      checkchange: function(a, b, c) {
        Ext.getCmp('grid').store.getAt(0).set('image', '<img src="resources/themes/images/default/tree/drop-yes.gif">');
So I get a grid that initially shows 3 columns (info, image, and check). When you click the `Show Name` button on the toolbar, the Name column appears with the proper wrapping. However, when you click the check in the Check column, the text wrapping instantly goes away.

Does the text wrapping go away because when I click the check column, the row refreshes? If so, is there anyway to prevent the entire row from refreshing? I realize it has to refresh the row for readjusting the height, so what other options do I have? I could add the wrap class back in everytime the grid refreshes, but that's no fun... is there anyway to make this class persistent until I remove it myself?

Any help would be appreciated. Thanks!