TabPanel with Resizable [Archive]

scarenci

13 Sep 2007, 10:21 AM

Hello everbody!

I would like to known how I make the tabpanel with resizable for example:

<pre>
var Tabs = {

init : function(){

var animated = new Ext.Resizable('jtabs', {
width: 200,
pinned: true,
height: 100,
minWidth:100,
minHeight:50,
animate:true,
easing: 'backIn',
handles: 'all',
widthIncrement:50,
draggable:true,
dynamic :false,
duration:0.6
});

// var jtabs = new Ext.TabPanel('jtabs');
var jtabs = new Ext.TabPanel('jtabs', {
resizeTabs:true, // turn on tab resizing
minTabWidth: 20,
preferredTabWidth:150
});

var tab1 = jtabs.addTab('jtabs-1', "Home");
tab1.setUrl('', null, true);

var tab2 = jtabs.addTab('jtabs-2', "Project");
tab2.setUrl('', null, true);

var tab3 = jtabs.addTab('jtabs-3', "Downloads");
tab3.setUrl('', null, true);

var tab4 = jtabs.addTab('jtabs-4', "Support");
tab4.setUrl('', null, true);
var tab4 = jtabs.addTab('jtabs-5', "Event Tab");
tab4.setUrl('', null, true);
var tab4 = jtabs.addTab('jtabs-6', "Contact");
tab4.setUrl('', null, true);

jtabs.activate('jtabs-1');

}
}

Ext.EventManager.onDocumentReady(Tabs.init, Tabs, true);
</pre>

I try this but don't work!!

thanks for any help!!

scarenci

13 Sep 2007, 10:54 AM

Hello everbody,

The code functioned!

goodbye !!

scarenci

13 Sep 2007, 5:03 PM

I found that code was correct, but the height not resized why?:((

/*
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
var ResizableExample = {
init : function(){

var animated = new Ext.Resizable('animated', {
pinned: true,
width: 500,
height: 500,
minWidth:500,
minHeight:500,
animate:true,
easing: 'backIn',
handles: 'all',
// widthIncrement:50,
// draggable:true,
dynamic :false,
//preserveRatio: true,
duration:0.6
});/*
var animated = new Ext.Resizable('animated', {
width: 200,
height: 100,
minWidth:100,
minHeight:50,
animate:true,
easing: 'backIn',
duration:0.6
});*/
Ext.get('animated').on('click', function(){
Ext.get('tabs-1').setHeight( Ext.get('animated').getHeight()-35);
});
}
};
Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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="../resources/css/ext-all.css" />

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script>
<script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
<link rel="stylesheet" type="text/css" href="../resources/css/xtheme-aero.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script> 

<script type="text/javascript" src="../ext-core.js"></script>
<script type="text/javascript" src="../package/util.js"></script>
<script type="text/javascript" src="../package/tabs/tabs.js"></script>


<link rel="stylesheet" type="text/css" href="css/tabs-example.css" />
<script type="text/javascript" src="js/tabs-example.js"></script>
<script language="javascript" src="js/basic.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>


<link rel="stylesheet" type="text/css" href="../examples/examples.css" />

<link rel="stylesheet" type="text/css" href="../examples.css" />

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

<style type="text/css">
#animated {
border:1px solid #c3daf9;
color:#1e4e8f;
font:bold 14px tahoma,verdana,helvetica;
text-align:center;
}
</style>
</head>
<body id="body">
<script type="text/javascript" src="../examples.js"></script>
<link rel="stylesheet" type="text/css" href="../lib.css" />



<div id="animated"><div id="tab"></div></div>

</body>
</html>

/*
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/

var Tabs = {

init : function(){

// var jtabs = new Ext.TabPanel('jtabs');
var tabs = new Ext.TabPanel('tab', {
resizeTabs:true // turn on tab resizing
//minTabWidth: 20,
//preferredTabWidth:150

});

var tab1 = tabs.addTab('tabs-1', "Home");
tab1.setUrl('http://www.comp.pucpcaldas.br/~al550271926/test.php', null, false);

var tab2 = tabs.addTab('tabs-2', "Project");
tab2.setUrl('http://www.comp.pucpcaldas.br/~al550271926/test.php', null, true);

var tab3 = tabs.addTab('tabs-3', "Downloads");
tab3.setUrl('http://www.comp.pucpcaldas.br/~al550271926/test.php', null, true);

var tab4 = tabs.addTab('tabs-4', "Support");
tab4.setUrl('http://www.comp.pucpcaldas.br/~al550271926/test.php', null, true);
var tab5 = tabs.addTab('tabs-5', "Event Tab");
tab5.setUrl('http://www.comp.pucpcaldas.br/~al550271926/test.php', null, true);
var tab6 = tabs.addTab('tabs-6', "Contact");
tab6.setUrl('http://www.comp.pucpcaldas.br/~al550271926/test.php', null, true);

tabs.activate('tabs-1');
var myDiv = Ext.get('tab');
myDiv.setOpacity(0.60);

}
}

Ext.EventManager.onDocumentReady(Tabs.init, Tabs, true);

Thanks for any help!!:D

scarenci

15 Sep 2007, 5:59 AM

Anybody helps me!!!:((