PDA

View Full Version : Viewport Navigation Link to Panel



jinbatsu
29 Jun 2008, 1:31 PM
This script:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Sample App</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>ext-2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>ext-2.1/ext-all.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jinjs/TabCloseMenu.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
new Ext.Viewport({
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:5px'
},
items: [{
title: 'Information',
region: 'south',
height: 50,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
html: '<marquee>Welcome to....</marquee>'
},{
title: 'Navigation',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250,
html: '<ul><li><a href=# onclick="TabPanel.add();">test</a></li></ul>' // <-- here
},{
title: 'Default Tab',
collapsible: false,
region:'center',
margins: '5 0 0 0',
html: '<iframe style="overflow:auto;width:100%;height:100%;" frameborder="0" src="<?php echo base_url() . "home/welcome"; ?>"></iframe>'
}]
});
});
</script>

</body>
</html>

The question is how can i make a menu to the container content with new tab and can close the tab, just like the ExtJS API Docs (http://extjs.com/deploy/dev/docs/).

I have see the source, but too complex.. I didn't get the point.

Thank You.
ExtJS is great!