我在表格布局中构建了一个简单的风险评估矩阵。我有听众会相应地更改该单元格的背景颜色。它完全按照我想要的方式在 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'
}]
}]
});
在此先感谢您的帮助。
最佳答案
Element.closest()不支持 IE，所以你也可以使用 Ext.dom.Element.up('td') 以获得所需的结果。
div.some-class 或 span:first-child )。这是findParentNode()的快捷方式总是返回 Ext.dom.Element 我已经更新了这个 FIDDLE 我已经在 中进行了测试IE-11 它工作正常。
代码片段
{
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'));
}
}
}
关于ExtJs 在不同浏览器上的表现不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50570759/