【发布时间】：2018-05-30 22:32:41
【问题描述】：
我有一个使用 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() {}
}]
}]
});
提前致谢。
【问题讨论】：
标签： javascript google-chrome extjs