ExtJS Column Checkbox

I finished another grid the other day and thought it would be great if I could substitute a checkbox for my text field that was displaying a boolean value.

I checked my bible - the Ext JS Cookbook by Jorge Ramon and it discussed the checkbox grid which allows you to select an entire row by selecting the checkbox.

But, I did not want that. What I wanted was to change my boolean value to a checkbox. I found just what I wanted by visiting this site: http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/examples/grid/edit-grid.js. This great government site keeps the old ExtJS 3.2 documentation and examples available.

 I found this grid example: http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/examples/grid/edit-grid.html. Yes, there was a checkbox in the grid!

What does the code do? Well it takes the boolean field and converts it to a checkbox field.

 First you define the custom checkbox field. My boolean field is named available.

// the check column is created using a custom plugin
    var checkColumn = new Ext.grid.CheckColumn({
        header: 'Available?',
        dataIndex: 'AVAILABLE',
        width: 55,
//incude the field below if your grid includes the row editor, otherwise remove this field and the comma following 55
  editor: new varForm.Checkbox({
   })
    });, 

  }

I then replaced the field definition for Available and replace it with checkColumn the // comment field shows how it was defined prior to the change. ,

    checkColumn 
    // the plugin instance
//            header: "Available",
//            dataIndex: 'AVAILABLE',
//            width: 100,
//       hidden: false,
//            sortable: true
// 
//          
  ]  
    })   

What else do you need to do? Well you must include this javascript file with you other ExtJS javascript files:

Pretty cool. Here is the before: Here is the after: