我有一个使用ExtJs构建的简单风险评估矩阵。当我使用箭头键从组合框的列表中进行选择时，它会自动滚动页面。我只在Chrome浏览器中运行时遇到此问题。在Inter Explorer中它工作正常。所以我打开控制台并看到以下错误： -
为滚动阻止“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。见https://www.chromestatus.com/feature/5745543795965952
所以我将我的代码复制到fiddle并且它在那里工作得很好但是这里是我在服务器上托管的实际webpage的链接。请导航至评估标签。这是我的矩阵的代码： -
Ext.create('Ext.TabPanel', {
name: 'myContainer',
id: 'myContainer',
renderTo: Ext.getBody(),
items: [{
title: 'Assessment',
name: 'assessmentPanel',
id: 'assessmentPanel',
layout: {
type: 'table',
tdAttrs: {
style: {
border: '1px solid #ccc'
}
},
columns: 5
},
defaults: {
bodyStyle: 'padding:40px',
},
items: [{
xtype: 'displayfield',
cellCls: 'gray'
}, {
html: '<b>Consequence</b>'
}, {
html: '<b>Likelihood</b>'
}, {
width: 15,
border: false,
xtype: 'displayfield',
cellCls: 'gray'
}, {
html: '<b>Risk</b>'
}, {
html: '<b>Service Interruption</b>'
}, {
xtype: 'combobox',
name: 'assessment1',
id: 'assessment1',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: '1'
}, {
text: 'Moderate',
value: '2'
}, {
text: 'Major',
value: '3'
}, {
text: 'Severe',
value: '4'
}]
})
}, {
xtype: 'combobox',
name: 'assessment7',
cellCls: 'green',
cls: 'bg-trasparent',
id: 'assessment7',
value: '1',
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Remote',
value: '1'
}, {
text: 'Possible',
value: '2'
}, {
text: 'Likely',
value: '3'
}, {
text: 'Almost Certain',
value: '4'
}]
})
}, {
width: 15,
border: false,
xtype: 'displayfield',
cellCls: 'gray'
}, {
xtype: 'displayfield',
name: 'risk1',
id: 'risk1',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}, {
html: '<b>Revenue Growth</b>'
}, {
xtype: 'combobox',
name: 'assessment2',
id: 'assessment2',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
width: 130,
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: '1'
}, {
text: 'Moderate',
value: '2'
}, {
text: 'Major',
value: '3'
}, {
text: 'Severe',
value: '4'
}]
})
}, {
xtype: 'combobox',
name: 'assessment8',
id: 'assessment8',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Remote',
value: '1'
}, {
text: 'Possible',
value: '2'
}, {
text: 'Likely',
value: '3'
}, {
text: 'Almost Certain',
value: '4'
}]
})
}, {
width: 15,
border: false,
xtype: 'displayfield',
cellCls: 'gray'
}, {
xtype: 'displayfield',
name: 'risk2',
id: 'risk2',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}, {
html: '<b>Reputation</b>'
}, {
xtype: 'combobox',
name: 'assessment3',
id: 'assessment3',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
width: 130,
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: '1'
}, {
text: 'Moderate',
value: '2'
}, {
text: 'Major',
value: '3'
}, {
text: 'Severe',
value: '4'
}]
})
}, {
xtype: 'combobox',
name: 'assessment9',
id: 'assessment9',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Remote',
value: '1'
}, {
text: 'Possible',
value: '2'
}, {
text: 'Likely',
value: '3'
}, {
text: 'Almost Certain',
value: '4'
}]
})
}, {
width: 15,
border: false,
xtype: 'displayfield',
cellCls: 'gray'
}, {
xtype: 'displayfield',
name: 'risk3',
id: 'risk3',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}, {
html: '<b>Legal and Compliance</b>'
}, {
xtype: 'combobox',
name: 'assessment4',
id: 'assessment4',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
width: 130,
// scroll: false,
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: '1'
}, {
text: 'Moderate',
value: '2'
}, {
text: 'Major',
value: '3'
}, {
text: 'Severe',
value: '4'
}]
})
}, {
xtype: 'combobox',
name: 'assessment10',
id: 'assessment10',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Remote',
value: '1'
}, {
text: 'Possible',
value: '2'
}, {
text: 'Likely',
value: '3'
}, {
text: 'Almost Certain',
value: '4'
}]
})
}, {
width: 15,
border: false,
xtype: 'displayfield',
cellCls: 'gray'
}, {
xtype: 'displayfield',
name: 'risk4',
id: 'risk4',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}, {
html: '<b>Capital Items</b>'
}, {
xtype: 'combobox',
name: 'assessment5',
id: 'assessment5',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
width: 130,
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: '1'
}, {
text: 'Moderate',
value: '2'
}, {
text: 'Major',
value: '3'
}, {
text: 'Severe',
value: '4'
}]
})
}, {
xtype: 'combobox',
name: 'assessment11',
id: 'assessment11',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Remote',
value: '1'
}, {
text: 'Possible',
value: '2'
}, {
text: 'Likely',
value: '3'
}, {
text: 'Almost Certain',
value: '4'
}]
})
}, {
width: 15,
border: false,
xtype: 'displayfield',
cellCls: 'gray'
}, {
xtype: 'displayfield',
name: 'risk5',
id: 'risk5',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}, {
html: '<b>Financial</b>'
}, {
xtype: 'combobox',
name: 'assessment6',
id: 'assessment6',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
width: 130,
//scroll: false,
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: '1'
}, {
text: 'Moderate',
value: '2'
}, {
text: 'Major',
value: '3'
}, {
text: 'Severe',
value: '4'
}]
})
}, {
xtype: 'combobox',
name: 'assessment12',
id: 'assessment12',
cellCls: 'green',
cls: 'bg-trasparent',
value: '1',
// scroll: false,
hideTrigger: true,
listeners: {
select: function(combo, records) {
var Myvalue = this.getValue();
assessRisk();
if (Myvalue == "1") {
combo.el.up('td').setStyle('background', 'green');
} else if (Myvalue == "2") {
combo.el.up('td').setStyle('background', 'yellow');
} else if (Myvalue == "3") {
combo.el.up('td').setStyle('background', 'orange');
} else if (Myvalue == "4") {
combo.el.up('td').setStyle('background', 'red');
}
}
},
queryMode: 'local',
width: 130,
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Remote',
value: '1'
}, {
text: 'Possible',
value: '2'
}, {
text: 'Likely',
value: '3'
}, {
text: 'Almost Certain',
value: '4'
}]
})
}, {
width: 15,
xtype: 'displayfield',
cellCls: 'gray'
}, {
xtype: 'displayfield',
name: 'risk6',
id: 'risk6',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}, {
height: 20,
baseCls: 'gray'
}, {
height: 20,
baseCls: 'gray'
}, {
height: 20,
baseCls: 'gray'
}, {
width: 20,
height: 20,
baseCls: 'gray'
}, {
height: 20,
id: 'test123',
name: 'test123',
baseCls: 'gray'
}, {
html: '<b>Highest Risk</b>'
}, {
xtype: 'displayfield',
name: 'finalConsequence',
id: 'finalConsequence',
value: 'Minor',
cellCls: 'green',
fieldCls: 'boldify',
}, {
xtype: 'displayfield',
name: 'finalLikelihood',
id: 'finalLikelihood',
value: 'Remote',
cellCls: 'green',
fieldCls: 'boldify',
}, {
width: 15,
xtype: 'displayfield',
cellCls: 'gray',
}, {
xtype: 'displayfield',
name: 'finalRisk',
id: 'finalRisk',
value: 'Low',
cellCls: 'green',
fieldCls: 'boldify',
}],
buttons: [{
text: 'Back',
scale: 'medium',
handler: function() {;
}
}, {
text: 'Submit',
formBind: true,
scale: 'medium',
disabled: true,
handler: function() {}
}]
}]
});
提前致谢。
答案 0 :(得分：1)
显然，在您使用的extjs版本（6.0.0）中，当＆＃34;可编辑＆＃34;时，组合正在将箭头键事件冒泡到浏览器。 config设置为false，可能是一个错误。
小提琴起作用，因为它设置为最新版本的Extjs
一个解决方案是为keydown事件创建处理程序并停止事件传播，首先在组合框中启用键事件，设置：
enableKeyEvents: true
创建处理keydown上的箭头键的函数：
function handleKeyUpDown(combo,e){
if ((e.keyCode == 38)||(e.keyCode == 40)) {
e.stopEvent();
}
}
并设置组合侦听器：
keydown: handleKeyUpDown
我希望有所帮助