我有一个简单的风险评估矩阵，内置在表格布局中。我有听众，相应地改变那个单元格的背景颜色。它完全适用于我想要它在chrome中的方式。但在Internet Explorer中工作不正常。
请查看此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'
}
},
// The total column count must be specified here
columns: 5
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:30px',
html: 'Risk',
scroll: false,
//border: true
//margin: '0 15 0 0'
},
items: [{
html: '<font color="white">Risk</font>',
//cellCls: 'first-row',
listeners: {
afterrender: function(view) {
console.log('view config entered!!');
//this.up('view').addCls('first-row');
//view.addCls('first-row');
}
}
}, {
html: '<b>Consequence</b>'
}, {
html: '<b>Likelihood</b>'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: '<b>Risk</b>'
}, {
html: '<b>Service Interruption</b>'
}, {
xtype: 'combobox',
name: 'assessment1',
id: 'assessment1',
cellCls: 'demo',
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
cls: 'bg-trasparent',
value: 'red',
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Red',
value: 'red'
}, {
text: 'Gray',
value: 'gray'
}, {
text: 'Green',
value: 'green'
}, {
text: 'Yellow',
value: 'yellow'
}, {
text: 'Blue',
value: 'blue'
}]
}),
listeners: {
select: function(combo, record) {
combo.el.dom.closest('td').style.background = record.get('value')
}
}
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Revenue Growth</b>'
}, {
xtype: 'combobox',
name: 'assessment2',
id: 'assessment2',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Reputation</b>'
}, {
xtype: 'combobox',
name: 'assessment3',
id: 'assessment3',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Legal and Compliance</b>'
}, {
xtype: 'combobox',
name: 'assessment4',
id: 'assessment4',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Capital Items</b>'
}, {
xtype: 'combobox',
name: 'assessment5',
id: 'assessment5',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Financial</b>'
}, {
xtype: 'combobox',
name: 'assessment6',
id: 'assessment6',
value: 'Minor',
width: 130,
height: 5,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
height: 20,
cellCls: 'noborder'
}, {
height: 20,
cellCls: 'noborder'
}, {
height: 20,
cellCls: 'noborder'
}, {
width: 20,
height: 20,
cellCls: 'noborder'
}, {
height: 20,
cellCls: 'noborder'
}, {
html: '<b>Highest Risk</b>'
}, {
html: 'Minor'
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}]
}]
});
提前感谢您的帮助。
答案 0 :(得分：6)
Element.closest()不支持IE，因此您也可以使用Ext.dom.Element.up('td')来获取所需的结果。
div.some-class或span:first-child）。这是findParentNode()始终返回Ext.dom.Element 我已更新此 FIDDLE ，我已在 IE-11 中测试过它正常运行。
CODE SNIPPET
{
xtype: 'combobox',
name: 'assessment1',
id: 'assessment1',
cellCls: 'demo',
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
cls: 'bg-trasparent',
value: 'red',
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Red',
value: 'red'
}, {
text: 'Gray',
value: 'gray'
}, {
text: 'Green',
value: 'green'
}, {
text: 'Yellow',
value: 'yellow'
}, {
text: 'Blue',
value: 'blue'
}]
}),
listeners: {
select: function(combo, record) {
var el = combo.el;
el.up('td').setStyle('background', record.get('value'));
}
}
}