PDA

View Full Version : Problem with tabpanels: autoload only load the first page.



marxan
11 Jul 2010, 11:44 PM
Hello,

I have a problem with a pae. I generate several panels wich contain an autoload to another page. The page load through a coldfusion loop some information to generate radiobutton.

My page works fine in Firefox but in IE it only loads the radio button for the first tab. So if I click on another tab it doesn't display anything.

As I don't get any error message, it's quite hard to find out the problem.

Any help would be appreciated.

Here is code.


<cfinclude template="../../../../../../config/initvariables.cfm">

<cfset MonitoringInstance = createObject("component", "#Variables.iflowconfig.componentspath#monitoring").init()/>
<cfset FlowList = MonitoringInstance.getGeneralInfo() />

<cfoutput>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8; " />

<title id="title">Monitoring Menu </title>

<link rel="stylesheet" type="text/css" href="#Variables.iflowconfig.url_root_all_app#../common/jscripts/ext-3.1.1/resources/css/ext-all.css" />

<script type="text/javascript" src="#Variables.iflowconfig.url_root_all_app#../common/jscripts/ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="#Variables.iflowconfig.url_root_all_app#../common/jscripts/ext-3.1.1/ext-all-debug.js"></script>




<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
}
</style>
</head>
<script type="text/javascript">
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
renderTo: 'form-ct',
width:850,
height:600,
activeTab: 3,
enableTabScroll: true,
tabPosition: 'top',
defaults:{autoScroll: true},
items:[
<cfset i = 1 >
<cfloop collection=#FlowList# item="flowtype">
<cfset u = 1 >
<cfloop list="#StructFind(FlowList, flowtype)#" index="j" >
{
autoLoad: {url: 'MasterMonitoring/radioButtonList.cfm', params: 'bpcodeid=#j#', scripts: true},
title: '#j#'}<cfif u neq listLen(StructFind(FlowList, flowtype)) || i neq structCount(FlowList)>, </cfif>
<cfset u = u + 1>
</cfloop>
<cfset i = i + 1 >
</cfloop>
]
});



});
</script>

<body>
<div id="form-ct"></div>
</body>
</html>
</cfoutput>and here is the radiobuttonList.cfm:



<cfinclude template="../../../../../../../config/initvariables.cfm">

<cfset MonitoringInstance = createObject("component", "#Variables.iflowconfig.componentspath#monitoring").init()/>
<cfset FlowList = MonitoringInstance.getGeneralInfo() />
<html>
<head></head>
<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();

var radioGroup = [{
bodyStyle: 'padding-left:5px;',
items: {
xtype: 'container',
autoHeight: true,
vertical: true,
columns: 1,
defaultType:'radio',
border: false,
items: [
<cfoutput>
<cfset FlowsByPgm = MonitoringInstance.getFlowsByProgram('#bpcodeid#') />
<cfset r = 1 >
<cfloop array="#FlowsByPgm#" index="k" >
{boxLabel: '#FlowsByPgm[r].xmlAttributes.display#',
name: 'rb-custwidth',
id: '#r#',
inputValue: '#r#'}<cfif r neq arraylen(FlowsByPgm)>, </cfif>
<cfset r = r + 1>
</cfloop>

</cfoutput>
]
}
}];

var fp = new Ext.FormPanel({

frame: true,
labelWidth: 110,
width: 1000,
renderTo:'rb',
bodyStyle: 'padding:0 10px 0;',
items: [
{layout: 'column',
border: false,
defaults: {
columnWidth: '.8',
border: false
},
items: [radioGroup]
}
]
});


});

</script>

<body>
<div id="rb"></div>
</body>
</html>

marxan
12 Jul 2010, 2:16 AM
I found the problem.

In my second page, I was using renderTo:'rb' so it was send to the same div.

I used a variable that I passed from the caller page, to give a different id to each page.




var fp = new Ext.FormPanel({


frame: true,

labelWidth: 110,

width: 1000,

renderTo:'#bpcodeid#',

bodyStyle: 'padding:0 10px 0;',

items: [

{layout: 'column',

border: false,

defaults: {

columnWidth: '.8',

border: false

},
items: [radioGroup]
}
]

});


new Ext.Button({

text: 'Show report',

iconCls:'new-tab',

renderTo:'#bpcodeid#'

}) ;


});


</script>

<body>

<div id="#bpcodeid#"></div>

</body>
</html>
</cfoutput>