ExtJ在不同的浏览器上的行为不同 [英] ExtJs acting differently on different browsers
本文介绍了ExtJ在不同的浏览器上的行为不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在表格布局中构建了一个简单的风险评估矩阵.我有侦听器，这些侦听器会相应地更改该单元格的背景颜色.它完全按照我想要的方式在chrome中工作.但是在Internet Explorer中无法正常工作.
I have a simple risk assessment matrix built in a table layout. I have listeners which change the background color of that cell accordingly. It works exactly how I want it to in chrome. But not working fine in Internet Explorer.
请查看此小提琴以获得更好的解释.
Please look at this fiddle for better explanation.
这是我的代码:-
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() doesn't support IE so you can use also use the Ext.dom.Element.up('td') to get the required result.
- Ext.dom.Element.up 会在dom上查找与所传递的简单选择器(例如
div.some-class或span:first-child)匹配的父节点.这是findParentNode()的快捷方式，它总是返回Ext.dom.Element
- Ext.dom.Element.up walks up the dom looking for a parent node that matches the passed simple selector (e.g.
div.some-classorspan:first-child). This is a shortcut forfindParentNode()that always returns anExt.dom.Element
我已经更新了此 FIDDLE ，并且我已经在 IE-11 正常.
I have updated this FIDDLE and I have tested in IE-11 it's working fine.
代码片段
{
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'));
}
}
}
这篇关于ExtJ在不同的浏览器上的行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
