PDA

View Full Version : Display problem with IE only



lv2
26 Aug 2010, 12:36 AM
Hello,
I've created a relative complex application with Extjs and today my customer want it to function with IE. That is part of the specifications but now he can't wait anymore.
Migration from extjs 2.x to 3.x was great and solved rather all my problems but one : when i activate another tab, do some stuff and come back to an existing tab, contents has mostly disappeared and comes back on mouseover and other activities.
This only happens with IE, not with FF, Chrome or Safari.
I tried several suggestions found on this forum, including forceLayout, layoutOnTabChange, activate, closeable ...
Today i made an extract from my code, and bingo, the same continues to happen, at leat at the first display.
When i come back to the first tab, the text first tab has disappeared. By resizing the window it comes back.

Would be great if someone has a suggestion to solve this problem.

Files :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST - Gestion</title>

<!-- Ceci est pour la version extjs 3.2.1 -->

<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />

<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-fr.js"></script>

</head>

<body>

<form action="">

<script language="javascript" src="test-start.js"></script>

<div id="center2"> </div>
<div id="center1"> </div>
<div id="south"> </div>

</form>
</body>
</html>



var centralTabPanel = new Ext.TabPanel( {
id : 'panneauCentral',
region : 'center',
deferredRender : false,
activeTab : 0,
// forceLayout : true,
// layoutOnTabChange: true,
// activate : function(p) {
// p.doLayout();
// // alert('tt');
// },
items : {
// contentEl : 'center1',
title : 'Bienvenue',
// closable:true,
autoScroll : true,
html : '<center>Cliquez sur le logo pour accéder à l\'aide.</center><br/>'

// autoLoad : 'accueil.html'
}
})

var associationTab;
var materielTab;

Ext.onReady(function() {
// alert("test");
Ext.BLANK_IMAGE_URL = 'images/s.gif';
var nord = new Ext.Panel( {
title : 'Gestion',
region : 'north',
height : 18

});

var viewport = new Ext.Viewport( {
layout : 'border',
items : [nord, centralTabPanel]
});

associationTab = new Ext.Panel({
title : 'Associations',
closable : true, // permet de fermer le tab, mais pas de le rouvrir, il n'est pas détruit
hideMode : 'offsets',
autoWidth : true,
height : 550,
plain : true,
// layout : 'border',
html : '<h1> first tab</h1>'
// items : [associationGrid, associationForm]
});

associationTab.on('close',function(p) {
p.destroy();
associationTab = false;
});

Ext.getCmp('panneauCentral').add(associationTab);
Ext.getCmp('panneauCentral').doLayout();
centralTabPanel.activate(associationTab);


materielTab = new Ext.Panel({
title : 'Matériels',
closable : true, // permet de fermer le tab, mais pas de le rouvrir, il n'est pas détruit
hideMode : 'offsets',
autoWidth : true,
height : 550,
plain : true,
// layout : 'border',
html : '<h1> second tab</h1>'
// items : [associationGrid, associationForm]
});

materielTab.on('close',function(p) {
p.destroy();
materielTab = false;
});

Ext.getCmp('panneauCentral').add(materielTab);
Ext.getCmp('panneauCentral').doLayout();
centralTabPanel.activate(materielTab);
});

lv2
28 Aug 2010, 2:13 AM
Got other problems

mayurid
28 Aug 2010, 4:43 AM
debug the code using www.jslint.com