I'm trying to understand how ExtJS4 handle legacy browsers like Internet Explorer 8. I have a complext initial page, that uses the border layout and have the north, south, center and west regions.
In the center I have a TabPanel that will be responsible by loading the new views. I already tried to reduce the MVC code, rendering only the west and center, but the tabs don't appear in the panel.
I'm also using the ext-all-debug.js but the developer console is empty (no errors).
There's another topic on StackOverflow that show's an workaround, and it actually quite work (broke some ComboBoxes and grid events):
// 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');
Why do I need this to render my tabpanel properly? How ExtJS handle old IE browsers?
ViewPort example
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);
}
});
EDIT:
I find out that the issue only happens when I set the font to Open Sans:
* {
/* font-family: 'Trebuchet MS', Arial, sans-serif !important; */
font-family: 'Open Sans', Arial, sans-serif !important;
-webkit-font-smoothing: antialiased;
}
Ok, so it seems that the problem is the CSS:
font-family: 'Open Sans', Arial, sans-serif !important;
When using this with * the layout breaks in IE. The solution is to change the original Ext CSS, in all places that a font is declared.