PDA

View Full Version : tab panel items not rendering properly?...



sam.arulprakash
17 Jun 2010, 11:26 PM
Hi all,

I have a tab Panel in first page.

in the tab Panel,I have configured two items.

One of the items has autoLoad property and name of the second page set as a value.( autoLoad:'Test_Ext.htm').

In the second page also having extjs controls.

But second page extjs controls not rendered properly.(Problem)
If i run the second page directly, it is working fine.

Please post your suggestions,and help me to fix this.

Thanks in advance.

Regards,
Arul Prakash.M



tab panel Page.


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Trace</title>
<link rel="stylesheet" type="text/css" href="lib/ext300/resources/css/ext-all.css" />
<script language="javascript" src="lib/TestBug/ext-base.js"></script>
<script language="javascript" src="lib/TestBug/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/css/c.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<script>
var tab = new Ext.TabPanel
({
renderTo:document.body,
enableTabScroll:true,
activeTab: 0,
width:1000,
height:550,
items:[{
id:'tab2',
title:'Test1'
},{
id:'tab1',
title:'Test',
autoLoad:'Test_Ext.htm'
}]
});

</script>
</div>
</form>
</body>
</html>


Test_Ext.htm


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="lib/ext300/resources/css/ext-all.css" />
<script language="javascript" src="lib/ext300/adapter/ext/ext-base.js"></script>
<script language="javascript" src="lib/ext300/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/css/c.css" />
</head>
<body>

<table id="PhrsLabelTable" runat="server" border="1" style="position:relative;" cellpadding="0" cellspacing="0">
<tr>
<td id="PhrsLabelColumn" runat="server">
<script type="text/javascript">
Ext.onReady(function()
{
var lbl = new Ext.form.Label(
{

text: 'Test',
style:'text-align:left;display:block;',
width:'120',
height:'50',
renderTo: 'PhrsLabelColumn'
});
});
</script>
</td>
</tr>
</table>
</body>
</html>

sam.arulprakash
22 Jun 2010, 8:49 PM
Hi all,

Any update on this?........

Please post your suggestions..

Regards,
Arul Prakash.M

chrizmaster
22 Jun 2010, 11:24 PM
Hey,

I've never heard about an "autoLoad" property for a panel, but if I were you, I would do it like this:



new Ext.Panel({
html:'<iframe src="Test_Ext.htm" style="border:0px #FFFFFF none; z-index:1" name="dataframe" scrolling="auto" frameborder="0" allowtransparency="true" background-color="transparent" marginheight="0px" marginwidth="0px" width="100%" height="100%"></iframe>'
})


Be carefull, don't forget that if you load a new html page, you have to add the ext-all and ext-base.js again, because it's a whole new instance...

Also please remember to add code tags (the PHP Button) next time when you add code.

Regards
Chriz

sam.arulprakash
23 Jun 2010, 12:06 AM
Thanks Criz,

Your suggestion working fine.

Thanks & Regards,
Arul Prakash.M

Condor
23 Jun 2010, 12:27 AM
Ext will take care of sizing the IFRAME if you define it as the panel body, e.g.

new Ext.Panel({
bodyCfg: {
tag: 'iframe',
src: 'Test_Ext.htm',
frameborder: 0
}
})

Condor
23 Jun 2010, 12:29 AM
ps. autoLoad can only load HTML fragments (no HTML, HEAD or LINK tags). It can load javascript, but only if you use:

autoLoad: {url: 'Test_Ext.htm', scripts: true}
(and remember that the document is already loaded, so you don't - and can't - use Ext.onReady)

sam.arulprakash
23 Jun 2010, 9:26 PM
Thanks Condor for your valuable reply.
autoLoad: {url: 'Test_Ext.htm', scripts: true} it is working fine.

I am going to try your first suggestion using IFRAME.

Thanks & Regards,
Arul Prakash.M