Сетка контрольных столбцов ExtJS - отметьте столбцы слева, снимите отметки справа

Я работаю над сеткой ExtJS, состоящей из текстового столбца, детализирующего элементы в сетке, и нескольких checkColumns, которые показывают, прошел ли элемент через определенную точку в процессе:

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')
    });
});

Я не уверен, как реализовать функциональность, при которой, когда флажок установлен для данной строки, он проверяет все, что находится слева от этого флажка, то есть отметьте «Фаза 5» для «Элемент 3» и фазы 1-4 для «Элемент». 3 'также проверяются. Я предполагаю, что аналогичный код можно было бы использовать для снятия флажков справа, если бы он не был отмечен, т.е. снимите флажок «Фаза 5» для «элемента 7», а фазы 6-10 для «элемента 7» не отмечены.

Я думаю, он будет использовать событие checkChange, где функция будет проверять, было ли изменение на 'checked' / true, переместиться вверх по DOM, каким-то образом определить, какой столбец был слева от данного столбца, и установить флажок для данного rowIndex to checked, что, в свою очередь, может (?) запустить свое событие checkChange и проходить его каскадно, пока не достигнет первого столбца и не остановится; может быть более эффективный способ сделать это, но я не знаю наверняка.

Это также может обрабатывать uncheck-to-right, проверяя изменение было на 'unchecked' / false, переходя вправо и снимая отметку с каждого столбца, пока последний столбец не будет достигнут и не будет снят.

Некоторый псевдокод, который, надеюсь, поможет:

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;
            }
        }
    }

Как бы это было закодировано? Нужно ли мне применять идентификаторы к моим столбцам, чтобы разрешить итерацию через универсальную функцию? Является ли решение несколькими функциями для каждого столбца? Какие свойства / методы / события мне использовать?

Кроме того, я также буду реализовывать «выбрать / отменить выбор всего в столбце», но здесь уже есть достаточно ответов, и, возможно, вызовет «выделить все влево / отменить выбор все вправо» как отдельный событие, поэтому я упоминаю его только в том случае, если он имеет отношение к этому вопросу.