ExtJs Grid CheckColumn disable or enable based on Record data

The ExtJs user extension Ext.ux.CheckColumn doesn't provide anything right out of the box. What we need here is a custom CheckColumn in which we are going to modify the renderer and the processEvent functions. Also in addition to that we need 2 more images that will represent a disabled checkbox that is either checked or unchecked.

In the example below the user can check or uncheck a box as long as the the Operating System is Android but not for iOS.

Enable disable a CheckColumn in ExtJs Grid based on Record data

Source code for custom ExtJs CheckColumn MyCheckColumn.js

Ext.define('CHKBOXES.view.MyCheckColumn', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.myCheckColumn',

    constructor: function() {
             * @event checkchange
             * Fires when the checked state of a row changes
             * @param {Ext.ux.CheckColumn} this
             * @param {Number} rowIndex The row index
             * @param {Boolean} checked True if the box is checked

    //Process and refire events routed from the GridView's processEvent method.
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
        if (type == 'mousedown' || (type == 'keydown' && (e.getKey() == e.ENTER || e.getKey() == e.SPACE))) {
            var record = view.panel.store.getAt(recordIndex);
            //do not change data and fire checkchange event if it's iOS
            if(record.get('os') != 'iOS'){
                dataIndex = this.dataIndex;
                checked = !record.get(dataIndex);
                record.set(dataIndex, checked);
                this.fireEvent('checkchange', this, recordIndex, checked);

            return false;
        } else {
            return this.callParent(arguments);

    renderer : function(value, metaData, record){
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'];
        //if os is iOS then change the class with disabled checkbox images
        if(record.get('os') === 'iOS'){
            if (value) {
                cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
            else {
                cls.push(cssPrefix + 'grid-checkheader-disabled');

        else {
            if (value) {
                cls.push(cssPrefix + 'grid-checkheader-checked');
            else {
                cls.push(cssPrefix + 'grid-checkheader');
        return '<div class="' + cls.join(' ') + '">&#160;</div>';

Application Project Explorer

Enable disable a CheckColumn in ExtJs Grid based on Record data

Application starting point index.html

    <title>ExtJs Disable CheckBoxes based on Record data</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <style type="text/css">
    .x-grid-checkheader {
        height: 14px;
        background-image: url('images/unchecked.gif');
        background-position: 50% -2px;
        background-repeat: no-repeat;
        background-color: transparent;
    .x-grid-checkheader-checked {
        background-image: url('images/checked.gif');
    .x-grid-checkheader-disabled {
        background-image: url('images/unchecked-disabled.gif');
    .x-grid-checkheader-checked-disabled {
        background-image: url('images/checked-disabled.gif');

    .x-grid-checkheader-editor .x-form-cb-wrap {
        text-align: center;
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>


Application JavaScript file app.js

    enabled: true


    name: 'CHKBOXES',

    appFolder: 'app',
    controllers: [

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

JavaScript source file for model Customer.js

Ext.define('CHKBOXES.model.Customer', {
    extend: 'Ext.data.Model',
    fields: [
             {name: 'active', type: 'bool'}

JSON data for Customers customers.json

    success: true,
    customers: [
        {customerId: 101, firstName: 'Enabled', lastName: 'Checked Box', os: 'Android', active: true},
        {customerId: 102, firstName: 'Disabled', lastName: 'Checked Box', os: 'iOS', active: true},
        {customerId: 103, firstName: 'Enabled', lastName: 'UnChecked Box', os: 'Android', active: false},
        {customerId: 104, firstName: 'Disabled', lastName: 'UnChecked Box', os: 'iOS', active: false}

JavaScript source file for store Customers.js

Ext.define('CHKBOXES.store.Customers', {
    extend: 'Ext.data.Store',
    model: 'CHKBOXES.model.Customer',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'data/customers.json',
        reader: {
            type: 'json',
            root: 'customers',
            successProperty: 'success'

JavaScript source file for grid view CustomerList.js

Ext.define('CHKBOXES.view.CustomerList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.customerList',
    store : 'Customers',
    initComponent: function() {
        this.columns = [
                header: 'Active',
                dataIndex: 'active',
                flex: 1,
                xtype: 'myCheckColumn',

            {header: 'Customer Id',  dataIndex: 'customerId',  flex: 1},
            {header: 'First Name',  dataIndex: 'firstName',  flex: 1},
            {header: 'Last Name',  dataIndex: 'lastName',  flex: 1},
            {header: 'OS',  dataIndex: 'os',  flex: 1}


JavaScript source file for the application controller Customers.js

Ext.define('CHKBOXES.controller.Customers', {
            extend : 'Ext.app.Controller',
            stores: ['Customers'],
            views : ['CustomerList','MyCheckColumn'],
            init : function() {
                    'viewport > panel' : {
                        render : this.onPanelRendered

            onPanelRendered : function(myPanel) {
                //just a console log to show when the panel is rendered
                console.log('The viewport was rendered');

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.