Combobox прокручивает страницу при помощи клавиш со стрелками ExtJs

Question

У меня есть простая матрица оценки риска, построенная с использованием ExtJ.Когда я использую клавиши со стрелками для выбора в списке, он автоматически прокручивает страницу.Я сталкиваюсь с этой проблемой только когда запускаю ее в Chrome.В Inter Explorer все работает нормально.Поэтому я открыл консоль и увидел следующую ошибку: -

Добавлен непассивный слушатель события в блокирующее прокрутку событие mousewheel.Пометьте обработчик событий как пассивный, чтобы сделать страницу более отзывчивой.См. https://www.chromestatus.com/feature/5745543795965952

Итак, я скопировал свой код в fiddle , и он прекрасно работает там, но вот ссылка на мою фактическую веб-страницу , размещенную на сервере.Пожалуйста, перейдите на вкладку оценки.Вот код моей матрицы: -

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() {}
         }]
     }]
 });

Заранее спасибо.

Answer 1

Очевидно, что в версии extjs, которую вы используете (6.0.0), комбо выводит события из клавиш стрелок в браузер, когда для «редактируемой» конфигурации задано значение false, вероятно, ошибка.

Скрипка работает, потому что установлена ​​последняя версия Extjs

Одно решение - создать обработчик события keydown и остановить распространение события, сначала включить ключевые события в поле со списком, установить:

enableKeyEvents: true

Создать функцию для обработки клавиш со стрелками при нажатии клавиш:

function  handleKeyUpDown(combo,e){ 
    if ((e.keyCode == 38)||(e.keyCode == 40)) {
       e.stopEvent();
    }
}

И установить комбо-слушатель:

keydown: handleKeyUpDown

Надеюсь, это поможет