在Extjs中,如何使用ctrl键并在Extjs网格中使用鼠标选中复选框来选择多个记录
如何在extjs网格中使用ctrl键和鼠标选中复选框来选择多个记录。我使用复选框模型在网格中显示复选框,请告诉我如何在按下ctrl或shift键时仅通过选择复选框来实现多重选择 为此,您需要使用config来使用 selModel Ext.selection.Model实例或配置对象,或选择模型类的别名字符串。在后一种情况下,其type属性确定此配置应用于哪种类型的选择模型。 一种复选框模型选择模型,用于呈现一列复选框,可通过切换来选择或取消选择行。此选择模型的默认模式为“多重”。 在本文中,我使用两个网格创建了一个演示。在第一个网格中,您可以通过ctrl/shift键选择记录,在第二个网格中,您可以通过单击行直接选择记录。我希望这将有助于/指导您达到您的要求 代码片段在Extjs中,如何使用ctrl键并在Extjs网格中使用鼠标选中复选框来选择多个记录,extjs,extjs5,extjs6-classic,Extjs,Extjs5,Extjs6 Classic,如何在extjs网格中使用ctrl键和鼠标选中复选框来选择多个记录。我使用复选框模型在网格中显示复选框,请告诉我如何在按下ctrl或shift键时仅通过选择复选框来实现多重选择 为此,您需要使用config来使用 selModel Ext.selection.Model实例或配置对象,或选择模型类的别名字符串。在后一种情况下,其type属性确定此配置应用于哪种类型的选择模型。 一种复选框模型选择模型,用于呈现一列复选框,可通过切换来选择或取消选择行。此选择模型的默认模式为“多重”。 在本文中,我
我通过添加键控向上和键控向下的侦听器来实现。请找到我更新代码的地方
您好,我需要实现多重选择只与组合的ctrl/shift键与鼠标点击复选框,在演示中我没有看到。我得到了它,修复了我的问题,我会更新小提琴。非常感谢。Narendra@user3629299衷心欢迎。如果这个答案对你有帮助,那么你接受这个答案。
Ext.application({
name: 'Fiddle',
launch: function () {
//define user store
Ext.define('User', {
extend: 'Ext.data.Store',
alias: 'store.users',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa@simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart@simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer@simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge@simpsons.com',
phone: '555-222-1254'
}, {
name: 'AMargeia',
email: 'marge@simpsons.com',
phone: '555-222-1254'
}]
});
//Define custom grid
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
store: {
type: 'users'
},
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
flex: 1,
dataIndex: 'phone'
}]
});
//create panel with 2 grid
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
//select multiple records by using ctrl key and by selecting the checkbox with mouse in extjs grid
xtype: 'mygrid',
title: 'multi selection example by using ctrl/shif key',
/*
* selModel
* A Ext.selection.Model instance or config object,
* or the selection model class's alias string.
*/
selModel: {
/* selType
* A selection model that renders a column of checkboxes
* that can be toggled to select or deselect rows.
* The default mode for this selection model is MULTI.
*/
selType: 'checkboxmodel'
}
}, {
//select multi record by row click
xtype: 'mygrid',
margin: '20 0 0 0',
title: 'multi selection example on rowclick',
/*
* selModel
* A Ext.selection.Model instance or config object,
* or the selection model class's alias string.
*/
selModel: {
/* selType
* A selection model that renders a column of checkboxes
* that can be toggled to select or deselect rows.
* The default mode for this selection model is MULTI.
*/
selType: 'checkboxmodel',
/* mode
* "SIMPLE" - Allows simple selection of multiple items one-by-one.
* Each click in grid will either select or deselect an item.
*/
mode: 'SIMPLE'
}
}]
});
}
});