PDA

View Full Version : TabPanel in IE problem



normanhab101
22 Apr 2009, 4:34 AM
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.

22 Apr 2009, 6:12 AM
can you see if it's actually performing the autoLoad?

normanhab101
22 Apr 2009, 6:37 AM
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}

22 Apr 2009, 6:55 AM
I would not say that it's a tabpanel issue per-say.
if you disable scripts, what do you see?

normanhab101
22 Apr 2009, 7:02 AM
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??? :-/

22 Apr 2009, 7:05 AM
It's a bug.

Post this in the bugs section.

thesilentman
22 Apr 2009, 7:24 AM
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
22 Apr 2009, 7:31 AM
post this in the bugs section http://www.extjs.com/forum/showthread.php?t=66430

we need help to solve it

Maxrunner
14 Jul 2009, 8:16 AM
Is there any way to tabpanels work in IE?

14 Jul 2009, 8:28 AM
Is there any way to tabpanels work in IE?

Please rephrase. I can't understand.

Maxrunner
14 Jul 2009, 8:33 AM
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.....

14 Jul 2009, 8:34 AM
waht does your code look like?

Maxrunner
14 Jul 2009, 8:38 AM
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}
}
]
});

14 Jul 2009, 8:41 AM
how about setting dimensions for your tab panel (height and width)

Maxrunner
14 Jul 2009, 8:42 AM
The idea was to let the panel resize acording to the content......this was submited as a bug according to this thread....

14 Jul 2009, 8:43 AM
From my experience, that doesn't work very well with IE.

Maxrunner
14 Jul 2009, 8:57 AM
So whats with the ext.base.event lib?

14 Jul 2009, 9:00 AM
What does that have to do with anything?

Maxrunner
14 Jul 2009, 9:22 AM
http://extjs.com/forum/showthread.php?t=66405