Select 列 header 上的所有复选框单击

Question

我正在尝试 select header 上的所有复选框单击

这是我的代码

columns: [
        { header: 'Select All', xtype: 'checkcolumn' dataIndex: 'active' },
        { header: 'Name', dataIndex: 'name' },
        { header: 'City', dataIndex: 'city' }            
    ],
    listeners: {                                                   
                'headerclick': {
                    fn: function (grid, col, e) {
                        if (col.fullColumnIndex == 0) {
                            //select row and check checkbox                           
                    }
                },
                    scope: this
                }
            }

我能够获得 selected 列索引。因此，如果它为零，那么我想浏览各行并选中所有复选框。

如何实现？请给我建议。

Answer 1

这应该适合您。只需要更新您商店的记录。

columns: [
        { header: 'Select All', xtype: 'checkcolumn' dataIndex: 'active' },
        { header: 'Name', dataIndex: 'name' },
        { header: 'City', dataIndex: 'city' }            
    ],
    listeners: {                                                   
                'headerclick': {
                    fn: function (grid, col, e) {
                        if (col.fullColumnIndex == 0) {
                            grid.store.each(function(rec){
                                rec.set(col.dataIndex, true);
                            });                          
                    }
                },
                    scope: this
                }
            }

Answer 2

这里是 select 点击所有列的例子 header。

columns: [  
    { header: 'Select All', xtype: 'checkcolumn' dataIndex: 'active' },  
    { header: 'Name', dataIndex: 'name' },  
    { header: 'City', dataIndex: 'city' }            
],

selModel:{   
      checkOnly : true,   
      mode:'MULTI'  
},
selType: 'checkboxmodel',

Answer 3

这里有一个例子select所有列checkbox by check header checkbox，但是位置在正文下面，我没找到解决方法。

{
    columns: [
        {
            header: 'Select All',
            xtype: 'checkcolumn',
            HeaderCheckbox: true,
            dataIndex: 'active'
        },
        {
            header: 'Name',
            dataIndex: 'name'
        },
        {
            header: 'City',
            dataIndex: 'city'
        }
    ],
    selModel: 'checkboxmodel'
}

Select 列 header 上的所有复选框单击

Select all checkbox on column header click

extjs

extjs5