我正在尝试了解ExtJS4如何处理Internet Explorer 8等传统浏览器。我有一个使用边框布局并具有北部，南部，中部和西部区域的Complext初始页面。
在中心，我有一个TabPanel，负责加载新视图。我已经尝试减少MVC代码，仅渲染西方和中心，但选项卡不会出现在面板中。
我也在使用ext-all-debug.js，但开发者控制台是空的（没有错误）。
StackOverflow上的another topic显示了一种解决方法，它实际上非常有用（打破了一些ComboBox和网格事件）：
// 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');
为什么我需要这个来正确渲染我的tabpanel？ ExtJS如何处理旧的IE浏览器？
ViewPort示例
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;
}
答案 0 :(得分：1)
我遇到过类似的问题，经IE 9，IE 10和IE 11验证， 而且我在DOM中看到手风琴的文本元素没有继承字体系列。
所以我在css中强迫它：
text {
font-family: 'Open Sans', Arial, sans-serif !important;
}
答案 1 :(得分：0)
好的，似乎问题是CSS：
font-family: 'Open Sans', Arial, sans-serif !important;
与*一起使用时，IE中的布局会中断。解决方案是在声明字体的所有位置更改原始的Ext CSS。
答案 2 :(得分：0)
原因是在呈现页面后加载了IE中的webfont。 这不会发生在Chrome或FF中。 布局调整为'Ariel'，然后当拉开'Open Sans'（更宽）时，文本被剪裁。 保持Ext.onready直到webfont加载。