PDA

View Full Version : Problem in loading the extjs contained html file in tab load of tabpanel



gudurivenugopal
19 Feb 2010, 8:04 AM
tabs.html
-----------------

<!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>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

var tabs2 = new Ext.TabPanel({
renderTo: 'tabs2',
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[
{
title: 'Ajax Tab 1',
autoLoad:'test1.html'
}
,
{
title: 'Ajax Tab 2',
autoLoad: {url: 'piechart.html', params: 'foo=bar', scripts: true}
}

]
});


});

</script>
</head>
<body>

<div id='tabs2'></div>
</body>
</html>

In this iam able to dispaly the simple html file without any script i.e test1.html,but unable to display the piechart.html which is having script files




test1.html
----------------------------

<!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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />

<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
</head>
<body>
<h1>Hi..</h1>
</body>
</html>
piechart.html
-----------------------------

<!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>Pie Chart</title>

<!-- base library -->

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


<!-- overrides to base library -->



<!-- ** Javascript ** -->

<!-- ExtJS library: base/adapter -->

<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->

<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>

<script type="text/javascript" src="js/pie-chart.js"></script>

</head>

<body>

<div id='container'></div>

</body>

</html>
</html>

gudurivenugopal
19 Feb 2010, 8:06 AM
tabs.html
-----------------

<!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>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

var tabs2 = new Ext.TabPanel({
renderTo: 'tabs2',
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[
{
title: 'Ajax Tab 1',
autoLoad:'test1.html'
}
,
{
title: 'Ajax Tab 2',
autoLoad: {url: 'piechart.html', params: 'foo=bar', scripts: true}
}

]
});


});

</script>
</head>
<body>

<div id='tabs2'></div>
</body>
</html>

In this iam able to dispaly the simple html file without any script i.e test1.html,but unable to display the piechart.html which is having script files




test1.html
----------------------------

<!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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />

<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
</head>
<body>
<h1>Hi..</h1>
</body>
</html>
piechart.html
-----------------------------

<!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>Pie Chart</title>

<!-- base library -->

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


<!-- overrides to base library -->



<!-- ** Javascript ** -->

<!-- ExtJS library: base/adapter -->

<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->

<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>

<script type="text/javascript" src="js/pie-chart.js"></script>

</head>

<body>

<div id='container'></div>

</body>

</html>
</html>

Plz help