Event beforecheckchange doesn't fire in extJS version 4.1.1

Question

I had a extJS fiddle which will alert the user when the checkbox is clicked.

Here is the code:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var myStore = Ext.create('Ext.data.Store',{
            data: [
                {
                    name: 'ex',
                    oldUser: 'Y'
                },
                {
                    name: 'ea',
                    oldUser: 'N'
                }
            ],
            fields: [
                {
                    name: 'name'
                },
                {
                    name: 'oldUser'
                }
            ]
        });
        Ext.create('Ext.grid.Panel', {
            height: 250,
            width: 579,
            title: 'My Grid Panel',
            renderTo: Ext.getBody(),
            defaultListenerScope: true,
            store: myStore,
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name'
                },
                {
                    xtype: 'checkcolumn',

                    dataIndex: 'oldUser',
                    text: 'OldUser',
                    listeners: {
                        // problem here!
                        beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert("asd"); }
                    }
                }
            ]
        });
    }
});

The beforecheckchange event will fire when I use extjs 4.2.0 and onward, but it won't fire when I used extjs 4.1.1 and versions before that.

But when I check the api doc for version 4.1.1, beforecheckchange is listed as an event I could use.

I want to know why the above example doesn't work for 4.1.1

Answer 1

Looks like You have to add CheckColumn manually:

var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{
        text: 'OldUser',
        dataIndex: 'oldUser',
        listeners: {
          beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); }
        }
    });

Try this fiddle:

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.Loader.setConfig({enabled:true});
    var myStore = Ext.create('Ext.data.Store',{
        data: [
            {
                name: 'ex',
                oldUser: true
            },
            {
                name: 'ea',
                oldUser: false
            }
        ],
        fields: [
            {
                name: 'name'
            },
            {
                name: 'oldUser'
            }
        ]
    });

    var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{
        text: 'OldUser',
        dataIndex: 'oldUser',
        listeners: {
          beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); }
        }
    });




    Ext.create('Ext.grid.Panel', {
        height: 250,
        width: 579,
        title: 'My Grid Panel',
        renderTo: Ext.getBody(),
        defaultListenerScope: true,
        store: myStore,
        columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name'
            },
            myCheckColumn
        ]
    });
}
});

But, there can be a problem to render checkbox. Change background-image in CheckHeader.css or create new and add it into application.

CheckHeader.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-editor .x-form-cb-wrap {
text-align: center;
}