组合框使用箭头键ExtJs滚动页面
[英]Combobox scrolling the page on using arrow keys ExtJs
问题描述
我有一个使用ExtJ构建的简单风险评估矩阵。 当我使用箭头键从组合框列表中进行选择时，它将自动滚动页面。 我只有在Chrome中运行它时才会遇到此问题。 在Inter Explorer中，它可以正常工作。 所以我打开控制台，看到以下错误：
在滚动阻止的“ mousewheel”事件中添加了非被动事件侦听器。 考虑将事件处理程序标记为“被动”，以使页面更具响应性。 参见https://www.chromestatus.com/feature/5745543795965952
因此，我将代码复制到小提琴中 ，在这里工作正常，但这是指向服务器上托管的实际网页的链接。 请导航到评估标签。 这是我矩阵的代码：-
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() {}
}]
}]
});
提前致谢。
1 个解决方案
解决方案1
1 已采纳 2018-05-31 02:10:35
显然，在您使用的extjs版本（6.0.0）中，当“可编辑”配置设置为false时，该组合将向浏览器冒出箭头键事件，这可能是一个错误。
提琴之所以起作用，是因为它设置为最新版本的Extjs
一种解决方案是创建一个处理keydown事件的处理程序并停止事件传播，首先在组合框中启用关键事件，设置为：
enableKeyEvents: true
创建用于处理按键时的箭头键的函数：
function handleKeyUpDown(combo,e){
if ((e.keyCode == 38)||(e.keyCode == 40)) {
e.stopEvent();
}
}
并设置组合侦听器：
keydown: handleKeyUpDown
希望对您有所帮助
HTML-禁用带有箭头键的页面滚动而没有完全禁用箭头键
[英]Html - disable page scrolling with arrow keys with out toatlly disabling arrow keys
使用箭头键阻止页面滚动，但仍允许光标在文本字段中移动？
[英]Prevent page-scrolling with arrow keys, but still allow cursor to move within text field?
当模态打开时，有人可以建议使用firefox中的箭头键进行页面滚动的解决方案吗？
[英]Can anyone suggest solution for page scrolling with arrow-keys in firefox, when modal is open?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.