javascript - 单击 headerCheckbox 时,不会为网格行调用 checkcolumn 事件(Extjs 6.6)
问题描述
我有一个网格,我在其中添加headerCheckbox
了全选/取消全选功能。还将事件添加checkchange
到checkcolumn
. 当我手动选择/取消选择任何复选框时,该事件工作正常,但当我通过标题复选框进行选择时它不会触发。
所以我的要求是,只要复选框中有任何选择更改,事件就会被触发。
这是我在 Grid 中的专栏:
{
xtype: 'checkcolumn',
dataIndex: 'xyz',
text: '',
headerCheckbox: true,
width: 25,
stopSelection: true,
sortable: false,
draggable: false,
resizable: false,
menuDisabled: true,
hideable: false
}
控制器中的一个事件:
control: {
'checkcolumn':{
checkchange: 'onCheckChange'
}
},
onCheckChange : function ( checkbox, rowIndex, checked, record, e, eOpts ) {
console.log(record);
}
解决方案
要捕获列标题检查更改事件,您需要侦听“ headercheckchange ”:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'active'],
data: [{
name: 'Lisa',
email: 'lisa@simpsons.com',
phone: '555-111-1224',
active: true
}, {
name: 'Bart',
email: 'bart@simpsons.com',
phone: '555-222-1234',
active: true
}, {
name: 'Homer',
email: 'homer@simpsons.com',
phone: '555-222-1244',
active: false
}, {
name: 'Marge',
email: 'marge@simpsons.com',
phone: '555-222-1254',
active: true
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
height: 200,
width: 400,
renderTo: Ext.getBody(),
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'checkcolumn',
headerCheckbox: true,
text: 'Active',
dataIndex: 'active',
listeners: {
headercheckchange: function(checkColumn, checked) {
console.log("Header Checkbox change event: ", checked);
},
checkchange: function(checkboxColumn, rowIndex, checked, record, e, eOpts ) {
console.log("Grid body column checkbox change event: ", rowIndex, checked, record);
}
}
}]
});
推荐阅读
- python - “对象没有属性”,即使它是在构造函数中定义的并且已经创建了对象的实例
- salesforce - 在 Salesforce LWC 中调用 Apex 时显示加载指示器
- powershell - 为 base64 基本身份验证标记化创建字符串时,Powershell 中出现意外结果
- java - 从数据库中访问 Java 程序生成的 CSV 文件
- avfoundation - 快速相机缩放
- mongodb - 按 $month 聚合和分组 mongodb 嵌套数据:
- c# - 重新导入我的项目,所有脚本和地形都消失了,我该如何解决这个问题?
- linux - 如何将 Linux 的查找、转换和复制命令合二为一
- android - Android 数据库测试 - 使用 Room.inMemoryDatabaseBuilder() 通过了与 Room.databaseBuilder() 完全相同的测试
- javascript - Chrome.Browser.Extension 错误:未捕获的 TypeError 和未检查的 runtime.lastError: