ExtJS Checkcolumn網格-選中左側的列，取消選中右側的列

Question

我正在一個ExtJS網格上工作，該網格由一個詳細說明網格中項目的文本列和幾個checkColumns組成，這些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')
    });
});

我不確定如何實現功能，在該功能中，當選中給定行的復選框時，它會檢查該復選框左側的所有內容，即檢查“階段3”的“項目3”，檢查階段1-4的“項目” 3'也被檢查。 我假設如果未選中類似的代碼，則會使用它取消選中右側的復選框，即，取消選中“項目7”的“階段5”，而取消選中“項目7”的6-10階段。

我認為它將使用checkChange事件，其中一個函數將檢查更改是否為“ checked” / true，在DOM上移，以某種方式確定給定列的左側是哪一列，並在給定rowIndex上設置復選框進行檢查，這可能會觸發它的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;
            }
        }
    }

如何編碼？ 我是否需要將ID應用於我的列以允許通過泛型函數進行迭代？ 解決方案是否為每列提供了多個功能？ 我要使用哪些屬性/方法/事件？

順便說一句，我還將實現“選擇/取消選擇列中的所有內容”，但是這里已經有足夠的答案，並且可以單獨觸發“選擇全部到左側/全部取消選中”事件，因此僅在與該問題相關的情況下才提及它。

Answer 1

不要嘗試選中列中的復選框，而只是獲取綁定到用戶單擊復選框的行的記錄。

然后，您可以根據用戶在哪個列中單擊復選框來更改記錄相1-相10的值。

您的checkChange事件處理程序應如下所示：

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

提琴與例子： https : //fiddle.sencha.com/#fiddle/2t4