PDA

View Full Version : Problem using tabs



ianh
16 Aug 2007, 12:52 PM
I have a (very) simple page containing two tabbed pages which works fine when I open it directly within the browser.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Ext Documentation Center</title>
<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="../ext-1.0/package/tabs/tabs.js"></script>
</head>
<body>

<script type="text/javascript">
Ext.onReady(function(){
var tabPanel = new Ext.TabPanel('tabPanel');
tabPanel.addTab('panel1', 'Details');
tabPanel.addTab('panel2', 'Procedure');
tabPanel.activate('panel1');
form.render('form');
});
</script>

<div id="form">
<div id="tabPanel">
<div id="panel1">This is the content for panel 1</div>
<div id="panel2">This is the content for panel 2</div>
</div>
</div>

</body>
</html>

Things go wrong when I open this page within another ContentPanel. I only see the plain text "This is the content for panel 1 This is the content for panel 2" when I call the file using this extract...



mainLayout.beginUpdate();

mainLayout.add('center', new Ext.ContentPanel(title, {
autoCreate: true,
title: title,
fitToFrame: true,
autoScroll : true,
background : false,
closable: true}));

var pagepanel = mainLayout.findPanel(title);
mainLayout.showPanel(pagepanel);

pagepanel.load({url:"tabs-example.php"})
mainLayout.endUpdate();

Could it be because the Ext.onReady is not firing on the loaded page when it's within an existing ContentPanel, where Ext.onReady has already been called???

devnull
16 Aug 2007, 4:35 PM
the short answer is that a tab isnt a browser window, and as such you should not be loading a complete html document into it.
Take a look at the API docs for the load method of contentPanel.
Its possible you may be able to get what you want by telling it to execute scripts, and removing the head and html sections from your page (Ext has already been loaded by your app). I am not sure about this part, but i also doubt Ext.onReady is going to work here, just execute the code as it loads.

ianh
16 Aug 2007, 11:40 PM
Thanks for the reply. It should let me progress some more :-?

I'd gone through the API doc for contentPanel but didn't appreciate that a full page wouldn't be loaded. The "load" and "setUrl" methods just say they load content, so I'd assumed they were like an IFrame.

ExtJS is crying out for a well written book, anyone know if any are currently being written?