TabPanel in IE problem

[normanhab101]

Hi all!
I had an ExtJs 2 app (cross browser) and migrated to version 3.

Everything worked fine, except for a TabPanel inside a Viewport:



var tabPanel = new Ext.TabPanel({
region:'center',
id:'center-panel',
deferredRender:false,
enableTabScroll:true,
margins: '0 5 0 0',
activeTab:0,
items:[{
contentEl:'center2',
title: 'Home',
closable:false,
autoScroll:true
}]
});

function addTab(tabId,tabTitle, targetUrl){
tabPanel.add({
id: tabId,
title: tabTitle,
autoLoad: {url: targetUrl, callback: this.initSearch, scope: this, scripts: true},
closable:true
}).show();
}

function updateTab(tabId,title, url) {
var tab = tabPanel.getItem(tabId);
if(tab){
tab.getUpdater().update(url);
tab.setTitle(title);
}else{
tab = addTab(tabId,title,url);
}
tabPanel.setActiveTab(tab);
}

var count = 0;
var actions = {
'id1' : function(){
updateTab('tab0','One','filewithextjscript.php');
},
'id2' : function(){
updateTab('tab1','Two','filewithextjscript.pvt.php');
},
'id3' : function(){
updateTab('tab2','Three','filewithextjscript.pvt.php');
},
'id4' : function(){
updateTab('tab3','Four','filewithextjscript.pvt.php');
}
};

function doAction(e, t){
e.stopEvent();
actions[t.id]();
}

menuPanel.body.on('mousedown', doAction, null, {delegate:'a'});
This works fine in Firefox, but in IE6 IE7 and IE8 the TabPanel's content don't show.
I guess there is something wrong with this:
(if I put only html on filewithextjscript.php shows ok, but extjs don't)



function addTab(tabId,tabTitle, targetUrl){
tabPanel.add({
id: tabId,
title: tabTitle,
autoLoad: {url: targetUrl, callback: this.initSearch, scope: this, scripts: true},
closable:true
}).show();
}
I appreciate help. :D
Thanks very much.

[[email protected]]

can you see if it's actually performing the autoLoad?

[normanhab101]

if I load the next file for example:

test.js


<script type="text/javascript">
Ext.MessageBox.alert('Test','Hello world');
</script>
<div id='div_test'>Hello div</div>
in Firefox the message box shows and in IE don't, both shows 'Hello div'
so I asume the autoLoad is performing and the problem is here:



autoLoad: {url: targetUrl, callback: this.initSearch, scope: this, scripts: true}

[[email protected]]

I would not say that it's a tabpanel issue per-say.
if you disable scripts, what do you see?

[normanhab101]

if I disable scripts only shows the 'Hello div' and the msgbox don't, in both (FF & IE) browsers
look's like IE ignores whats inside the <script> tags, but why FF execute the script??? :-/

[[email protected]]

It's a bug.

Post this in the bugs section.

[thesilentman]

I have the same issue in a quick and dirty (not that dirty!!) app I am programming now with 3.0. The code has been checked with jslint and is ok (no extra commas or such).
However autoload isn't triggering loading from the server.
It seems to crash where the innerHTML is assign the indicatortext.
I traced the error and IE fails here =>ext-all-debug.js:6142 with an 'unknown runtime error'.


6140 showLoading : function(){
6141 if(this.showLoadIndicator){
6142 this.el.dom.innerHTML = this.indicatorText;
6143 }
6144 },



However if I disable the indicator: Ext.Updater.defaults.showLoadIndicator=false;


the error moves further down the rabbithole.... (since I am also embedding script.....)


2897 });
2898 dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
2899 return this;

As if there is a problem with the dom.innerHTML in ie....


The code works in all browsers except ie 6,7. I have not tested 8 yet.

ExtJS Version : 3.0 RC1

Any ideas?

CU,
Frank

[normanhab101]

post this in the bugs section http://www.extjs.com/forum/showthread.php?t=66430

we need help to solve it

[Maxrunner]

Is there any way to tabpanels work in IE?

[[email protected]]

Is there any way to tabpanels work in IE?

Please rephrase. I can't understand.

[Maxrunner]

The tabs arent showing their content in IE...i've been going throught this thread to see if there was a solution. Seems like adding the ext.base.event lib might do it.....

[[email protected]]

waht does your code look like?

[Maxrunner]

waht does your code look like?


// second tabs built from JS
var tabs2 = new Ext.TabPanel({
id:'entidadeTabPanel',
renderTo: 'entidadetabs',
items :[
<c:choose>
<c:when test="${entidadeFormBean.tipoEntidade eq '1'}">
{
title: 'Requerente',
autoLoad: {url: 'editEntidade.do2', params: 'method=loadEntidadeSingularForm', scripts: true}
},{
title: 'Documentos Anexados',
autoLoad: {url: 'editEntidade.do2', params: 'method=loadMoradaForm',height: 600, scripts: true}
}
</c:when>
<c:when test="${entidadeFormBean.tipoEntidade eq '2'}">
{
title: 'Requerente',
autoLoad: {url: 'editEntidade.do2', params: 'method=loadEntidadeColectivaForm', scripts: true}
},{
title: 'Documentos Anexados',
autoLoad: {url: 'editEntidade.do2', params: 'method=lloadLocaisForm', scripts: true}
}
</c:when>
</c:choose>
,{
title: 'Morada Estrangeira',
autoLoad: {url: 'editEntidade.do2', params: 'method=loadMoradaEstrangeiraForm', scripts: true}
}
]
});

[[email protected]]

how about setting dimensions for your tab panel (height and width)

[Maxrunner]

The idea was to let the panel resize acording to the content......this was submited as a bug according to this thread....

[[email protected]]

From my experience, that doesn't work very well with IE.

[Maxrunner]

So whats with the ext.base.event lib?

[[email protected]create.com]

What does that have to do with anything?

[Maxrunner]

http://extjs.com/forum/showthread.php?t=66405