ExtJs 4 checkcolumn example with Model data mapping

CheckColumn user extension is very handy when it comes to adding a checkbox to all the rows in a grid. You can add this at any position. In this example we are using it to display if the customer record is active or not.

basically it's a Header subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click. In addition to toggling a Boolean value within the record data, this class adds or removes a css class 'x-grid-checked' on the td based on whether or not it is checked to alter the background image used for a column.

Ext.ux.CheckColumn ExtJs 4 example

Add CheckHeader.css to the index.html file

    <title>ExtJs checkcolumn Example </title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="extjs/ux/css/CheckHeader.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>


Changes to app.js

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

    enabled: true 


    name: 'CHECKCOL',

    appFolder: 'app',
    controllers: [

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                    xtype: 'customerList',

Define the model with the checkbox field

In this example the checkbox is the customer's status field. But the data stored in the backend is a character A=Active not boolean true or false. So we have to convert the field in the model definition as shown below
Ext.define('CHECKCOL.model.Customer', {
    extend: 'Ext.data.Model',
    fields: [
             {name: 'active', type: 'bool',
                 convert: function(v){
                     return (v === "A" || v === true) ? true : false;

In the end just define the Grid with status column xtype as checkcolumn

  header: 'Active',
  dataIndex: 'active',
  flex: 1,
  xtype: 'checkcolumn',

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.