Blog Archive

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

<html>
<head>
    <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>

</head>
<body></body>
</html>

Changes to app.js

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

Ext.Loader.setConfig({ 
    enabled: true 
    });

Ext.require([
             'Ext.data.*',
             'Ext.grid.*',
             'Ext.ux.CheckColumn'
         ]);

Ext.application({
    name: 'CHECKCOL',

    appFolder: 'app',
   
    controllers: [
                  'Customers'
              ],

    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: [
             'customerId',
             'firstName',
             'lastName',
             'email',
             {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',
 }