Combobox scrolling the page on using arrow keys ExtJs
Question
I have a simple risk assessment matrix built using ExtJs. When I use arrow keys to select from the list of the combobox it scrolls the page automatically. I face this problem only when I run it in Chrome. In Inter Explorer it works fine. So I opened the console and saw the following error:-
Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
So I copied my code to fiddle and it works fine there but here's a link to my actual webpage hosted on a server. Please navigate to the assessment tab. Here's the code to my matrix:-
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() {}
}]
}]
});
Thanks in advance.
1 answers
solution1
1 ACCPTED 2018-05-31 02:10:35
Apparently, in the extjs version that you using (6.0.0), the combo is bubbling up the arrows keys events to the browser when the "editable" config is set to false, probably a bug.
The fiddle works because its set to the latest version of Extjs
One solution its to create a handler to the keydown event and stop the event propagation, first enable key events in the combo box, set:
enableKeyEvents: true
Create the function to handle arrow keys on keydown:
function handleKeyUpDown(combo,e){
if ((e.keyCode == 38)||(e.keyCode == 40)) {
e.stopEvent();
}
}
And set the combo listener:
keydown: handleKeyUpDown
I Hope that helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Prevent space and arrow keys scrolling web page?
How to disable page scrolling in FF with arrow keys
prevent scrolling with arrow keys
Html - disable page scrolling with arrow keys with out toatlly disabling arrow keys
extjs 6 modern combobox with infinite scrolling
Disable Scrolling With Arrow Keys in Flash
Prevent page-scrolling with arrow keys, but still allow cursor to move within text field?
Can anyone suggest solution for page scrolling with arrow-keys in firefox, when modal is open?
Vertical Scrolling page with Arrow in the bottom
Hover using arrow keys
Related Tags