Question

我正在开发一个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')
    });
});

我不确定如何实现功能，当检查给定行的复选框时，它会检查该复选框左侧的所有内容，即检查“第3阶段”中的“第3项”和阶段1-4对于“项目3”也进行了检查。我假设如果未选中，则会使用类似的代码取消选中右边的复选框，即取消选中“第7项”的“第5阶段”和“第7项”的第6-10阶段。

我认为它将使用checkChange事件，其中一个函数将检查更改是'checked'/ true，向上移动DOM，以某种方式识别哪个列位于给定列的左侧，并设置复选框要检查的给定rowIndex，它反过来可能（？）触发它的checkChange事件，并级联直到它到达第一列并停止;可能有一种更有效的方法来做到这一点，但我不确定。

这也可以处理取消选中，检查更改是否为“未选中”/ 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;
            }
        }
    }

如何编码？我是否需要将Ids应用于我的列以允许迭代通用函数？解决方案是每个列的多个功能吗？我可以使用哪些属性/方法/事件？

顺便说一句，我也将实现“在列中选择/取消选择所有内容”，但此处已有足够的答案，并且可行地触发“全部选择左/右选全部”作为一个单独的事件，所以我只是提到它，以防它与这个问题相关。

Answer 1

不要尝试检查列中的复选框，只需获取绑定到用户单击复选框的行的记录。

然后，您可以根据用户单击复选框的列来更改记录phase1 - phase10值。

您的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

ExtJS checkcolumn网格 - 检查左边的列，取消选中右边的列

1 个答案: