Programmers Sample Guide: 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.

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',
 }

Programmers Sample Guide

ExtJs 4 checkcolumn example with Model data mapping

Add CheckHeader.css to the index.html file

Changes to app.js

Define the model with the checkbox field

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

No comments:

Post a Comment