我试图了解 ExtJS4 如何处理 Internet Explorer 8 等旧版浏览器。我有一个复杂的初始页面，它使用边框布局并具有北部、南部、中心和西部区域。
在中心，我有一个 TabPanel，负责加载新视图。我已经尝试减少 MVC 代码，只渲染西部和中心，但选项卡不会出现在面板中。
我也在使用，ext-all-debug.js但开发者控制台是空的（没有错误）。
StackOverflow 上的另一个主题显示了一种解决方法，它实际上非常有效（破坏了一些 ComboBoxes 和网格事件）：
// Override CSS3BorderRadius value which caused render problems in <IE9 when false.
Ext.supports['CSS3BorderRadius'] = true;
// Hack-ish remove class sniffers from Ext.EventManager (which attaches modrnizer type classes onto the body)
Ext.getBody().removeCls('x-nbr x-nlg');
为什么我需要它来正确呈现我的标签面板？ExtJS 如何处理旧的 IE 浏览器？
视口示例
Ext.define('MyApp.view.AppViewport', {
extend: 'Ext.container.Viewport',
border: true,
cls: '',
id: 'app-viewport',
padding: '5 5 5 5',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
style: {
background: '#F1F1F1'
},
items: [{
xtype: 'panel',
region: 'west',
split: true,
width: 250,
layout: {
type: 'accordion'
},
collapsed: false,
collapsible: true,
title: 'Menu',
items: [
/*{
xtype: 'treepanel',
filterByText: function(text) {
this.filterBy(text, 'text');
},
filterBy: function(text, by) {
this.clearFilter();
var view = this.getView(),
me = this,
nodesFiltered = [];
if(!text || text == '') {
me.collapseAll();
} else {
// Find the nodes which match the search term, expand them.
// Then add them and their parents to nodesAndParents.
this.getRootNode().cascadeBy(function(tree, view){
var currNode = this;
if(currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {
currNode.expand();
if(currNode.hasChildNodes()) {
currNode.eachChild(function(node){
nodesFiltered.push(node.id);
});
}
while(currNode.parentNode) {
nodesFiltered.push(currNode.id);
currNode = currNode.parentNode;
currNode.expand();
}
}
}, null, [me, view]);
// Hide all of the nodes which aren't in nodesAndParents
this.getRootNode().cascadeBy(function(tree, view){
var uiNode = view.getNodeByRecord(this);
if(uiNode && !Ext.Array.contains(nodesFiltered, this.id)) {
Ext.get(uiNode).setDisplayed('none');
}
}, null, [me, view]);
}
},
clearFilter: function() {
var view = this.getView();
this.getRootNode().cascadeBy(function(tree, view){
var uiNode = view.getNodeByRecord(this);
if(uiNode) {
Ext.get(uiNode).setDisplayed('table-row');
}
}, null, [this, view]);
},
id: 'programasTree',
title: 'Programas',
store: 'MyTreeStore',
rootVisible: false,
viewConfig: {
id: 'programastree'
},
dockedItems: [
{
xtype: 'textfield',
dock: 'top',
id: 'txtFiltrar',
margin: '5 0 5 0',
fieldLabel: 'Filtrar',
labelWidth: 60
}
]
},*/
{
xtype: 'panel',
border: false,
title: 'Favoritos'
}, {
xtype: 'panel',
border: false,
title: 'Recentes'
}
]
}, {
xtype: 'panel',
region: 'center',
cls: 'x-portal',
id: 'app-portal',
layout: {
type: 'fit'
},
/*
bodyCls: [
'x-portal-body',
'x-panel-body-default',
'x-box-layout-ct',
'x-layout-fit'
],
*/
items: [{
xtype: 'tabpanel',
id: 'mainTabPanel',
items: [{
xtype: 'panel',
title: 'Tab 1'
}, {
xtype: 'panel',
title: 'Tab 2'
}, {
xtype: 'panel',
title: 'Tab 3'
}]
}]
}]
});
me.callParent(arguments);
}
});
编辑：
我发现只有当我将字体设置为 Open Sans 时才会出现问题：
* {
/* font-family: 'Trebuchet MS', Arial, sans-serif !important; */
font-family: 'Open Sans', Arial, sans-serif !important;
-webkit-font-smoothing: antialiased;
}