单击列标题上的全部复选框

Question

我正在尝试选择标题上的所有复选框点击

这是我的代码

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

我能够获得所选的列索引。所以，如果它是零，那么我想通过行检查所有复选框。

如何实现？请建议我。

Answer 1

以下是选择点击标题的所有列的示例。

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

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

Answer 2

这是一个通过check header复选框选中所有列复选框的示例，但位置在文本下面，我找不到解决方案。

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

Answer 3

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

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