ExtJS checkcolumn grid - check columns to left, un

Question

I am working on an ExtJS grid comprised of a text column detailing the items in the grid, and several checkColumns that represent whether an item has been through a particular point in a process:

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
    'Ext.ux.CheckColumn'
]);

Ext.onReady(function(){
    Ext.define('ProcessModel', {
        extend: 'Ext.data.Model',
        fields: [
            'Item',
            'Phase1',
            'Phase2',
            'Phase3',
            'Phase4',
            'Phase5',
            'Phase6',
            'Phase7',
            'Phase8',
            'Phase9',
            'Phase10'
        ]
    });

    // create the Data Store
    var processStore = Ext.create('Ext.data.Store', {
        model: 'processModel',
        autoLoad: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: '<?= $site_url ?>/Production/Processes/<?= $itemId ?>',
            reader: {
                type: 'json',
                model: 'ProcessModel',
                root: data
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        width: 800,
        store: processStore,
        title: 'Processes',
        tbar: [
            {
                xtype: 'button',
                text: 'Update',
                handler: function(){
                    //TODO: update by POST function
                }
            }
        ],
        columns: [
            {
                text: 'Item',
                dataIndex: 'Item'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 1',
                dataIndex:'Phase1'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 2',
                dataIndex:'Phase2'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 3',
                dataIndex:'Phase3'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 4',
                dataIndex:'Phase4'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 5',
                dataIndex:'Phase5'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 6',
                dataIndex:'Phase6'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 7',
                dataIndex:'Phase7'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 8',
                dataIndex:'Phase8'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 9',
                dataIndex:'Phase9'
            },{
                xtype: 'checkcolumn',
                text: 'Phase 10',
                dataIndex:'Phase10'
            }
        ],
        renderTo: Ext.get('sencha_processes')
    });
});

I'm not sure how to implement functionality where, when a checkbox is checked for a given row, it checks everything to the left of that checkbox, i.e. check 'Phase 5' for 'Item 3' and phases 1-4 for 'Item 3' are also checked. I assume similar code would be used to uncheck checkboxes to the right if it were unchecked, i.e. uncheck 'Phase 5' for 'Item 7' and phases 6-10 for 'Item 7' are unchecked.

I think it will use the checkChange event, where a function would check the change was to 'checked'/true, move up the DOM, somehow identify which column was to the left of a given column, and set the checkbox on the given rowIndex to checked, which in turn might(?) fire its checkChange event, and cascade through until it reached the first column and stop; there might be a more efficient method to do this, but I don't know for certain.

This could also handle the uncheck-to-right, checking the change was to 'unchecked'/false, moving to the right and unchecking each column until the last column is reached and unchecked.

Some pseudo-code to hopefully help:

listeners: {
    checkChange: {
        function (this, rowIndex, checked, eOpts) {
            if(checked) {
                column = this.up('column').getNameOrId -1;
                boxToLeft = column.down('row').rowIndex.getCheckBox;
                boxToLeft.check;
            };
            if(!checked) {
                column = this.up('column').getNameOrId +1;
                boxToRight = column.down('row').rowIndex.getCheckBox;
                boxToLeft.uncheck;
            }
        }
    }

How would this be coded? Do I need to apply Ids to my columns to allow iteration through a generic function? Is the solution multiple functions for each column? What properties/methods/events am I to use?

As an aside, I'll also be implementing "select/deselect all in a column", but there are enough answers for that on here already, and would feasibly trigger the "select all to left/deselect all to right" as a separate event, so I'm only mentioning it in case it is relevant to this question.

Answer 1

Do not try to check checkbox in columns, just get record which is bind to row on which user click on checkbox.

Then you can change record phase1 - phase10 values based on in which column user click on checkbox.

Your checkChange event handler should look like this:

function onCheckChange (column, rowIndex, checked, eOpts) {
    // get record which is bind to row on which user click on checbox
    var record = processStore.getAt(rowIndex); 

    // get index of column   
    var columnIndex = column.getIndex();

    // change record values
    for (var i = 1; i <= 10; i++) {
        if (i <= columnIndex) {
            record.set('Phase'+i, true);
        } 
        else 
        {
            record.set('Phase'+i, false);
        }
    }
} 

Fiddle with example: https://fiddle.sencha.com/#fiddle/2t4