PDA

View Full Version : How do i add tab scrolling



Ginger_Conor
9 Aug 2009, 2:53 PM
this is my code so far, how can i add tab scrolling to my tabpanel

<html>
<head>
<title>Make IT Easy</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="glossary.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:10px;
}
.page {
background-image:url(Icons/silk/icons/page.png);
}
.pageedit {
background-image:url(Icons/silk/icons/page_edit.png);
}
.pagedelete {
background-image:url(Icons/silk/icons/page_delete.png);
}
.pagecopy {
background-image:url(Icons/silk/icons/page_copy.png);
}
.glossary {
background-image:url(Icons/silk/icons/book_addresses.png);
}
.manual {
background-image:url(Icons/silk/icons/book.png);
}
.folderadd {
background-image:url(Icons/silk/icons/folder_add.png);
}
.folderdelete {
background-image:url(Icons/silk/icons/folder_delete.png);
}
.folderedit {
background-image:url(Icons/silk/icons/folder_edit.png);
}
.folder {
background-image:url(Icons/silk/icons/folder.png);
}

</style>
</head>
<body><script type="text/javascript">
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [new Ext.BoxComponent(
//start north region
{
region: 'north',
height: 32,
contentEl: 'center2'
})
//start west region
,{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 160,
minwidthe: 150,
maxwidth: 200,
autoScroll: true,
split: true,
//start west region tree
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
draggable: true,
children: [{
text: 'Manual',
id: 'manual',
iconCls: 'manual',
leaf: true,
icon: 'Icons/silk/icons/book.png',
html: '<center><u>This is an instruction manual that will teach you how to use these tutorials</u></center><br><u>Using the layout</u><br><p>The layout is designed so that you can resize the panels and hide them.<img src="ext-3.0.0/resources/images/default/layout/collapse.gif"/><img src="ext-3.0.0/resources/images/default/layout/expand.gif"/>Clicking the double arrows will expand and collapse the panels.<br>If you hover over the edge of a panel you can click and drag to resize it.If you want to reset the page back to how it was at the start refrest your webbrowser.</p><br><u>How to use the tree menu</u><br><p>If an icon has a small plus at the side of it it means that it is a folder, clicking on the plus will expand the folder revealing more tutorials. when you click on the plus<img src="ext-3.0.0/resources/images/default/tree/elbow-end-plus.gif"/> it will change in to a minus, clicking the minus<img src="ext-3.0.0/resources/images/default/tree/elbow-end-minus.gif"/> will collapse the folder.The name of the folder will be relevant to the tutorials that it contains.</p><br><u>How to open a tutorial</u><br><p>First find the tutorial that you wish to view, clicking on the link will open a new tab with the tutorial in it. The tab will be added in the center window to close the tutorial click on the small cross <img src="ext-3.0.0/resources/images/default/tabs/tab-close.gif"/> on the tab</p><br><u>Glossary</u><br><p>If you do not understand what any of the words in the tutorials mean then click on the glossary link, if you cannot read all of the text then use the scroll bars to move the gird up and down or left and right. You can also resize the columns by hovering over and when an arrow appears click and drag.<br><br>If you would like any more definitions adding please email me at [email protected]</p>'
}, {
text: 'Glossary',
id: 'glossary',
leaf: true,
iconcls: 'glossary',
icon: 'Icons/silk/icons/book_addresses.png',
html: '<p><center>Glossary</center></p>'
}, {
text: 'File Management',
leaf: false,
icon: 'Icons/silk/icons/folder.png',
id: 'file_management',
children: [{
text: 'Open a Folder',
leaf: true,
iconCls: 'folder',
icon: 'Icons/silk/icons/folder.png',
id: 'open_a_folder',
html: '<center><u>How to open a folder</u></center><br><p>There are 2 ways to open a folder<br><br>The first option is to just double click on the folder.<br><br>The second option is to RIGHT click on the folder and select OPEN</p>'
}, {
text: 'Create a Folder',
leaf: true,
iconCls: 'folderadd',
icon: 'Icons/silk/icons/folder_add.png',
id: 'create_a_folder',
html: '<center><u>How to create a folder</u></center><br><p>To create a folder go the the location where you want to create it and RIGHT click. select NEW then select FOLDER.<br><br>Next Give the folder a name.<br><br>Once you have given the folder a name either click off the icon or press the Enter/Return key.</p>'
}, {
text: 'Delete a Folder',
leaf: true,
iconCls: 'folderdelete',
icon: 'Icons/silk/icons/folder_delete.png',
id: 'delete_a_folder',
html: '<center><u>How to delete a folder</u></center><br><p>First find the folder that you would like to delete.<br><br>There are 2 ways to delete the folder<br><br>The first option is to CLICK on the folder ONCE then press delete.<br><br>The second option is to RIGHT click on the folder and select delete<br><br>Whichever option you choose a popup box will appear asking you if you are sure you want to delete the folder</p>'
}, {
text: 'Rename a Folder',
leaf: true,
iconCls: 'folderedit',
icon: 'Icons/silk/icons/folder_edit.png',
id: 'rename_a_folder',
html: '<center><u>How to rename a folder</u></center><br><p>First find the folder that you wish to rename<br><br>Now RIGHT click on the folder and select rename and enter a new name<br><br>Now press the Enter/Return key.</p>'
}, {
text: 'Open a file',
leaf: true,
iconCls: 'page',
icon: 'Icons/silk/icons/page.png',
id: 'open_a_file',
html: '<center><u>How to open a file</u></center><br><p>There are 2 ways to open a file<br><br>The first option is to just double click on the file.<br><br>The second option is to RIGHT click on the file and select the top option, it may say RUN, OPEN or something else</p>'
}, {
text: 'Delete a file',
leaf: true,
iconCls: 'pagedelete',
icon: 'Icons/silk/icons/page_delete.png',
id: 'delete_a_file',
html: '<center><u>How to delete a file</u></center><br><p>First find the file that you would like to delete.<br><br>There are 2 ways to delete the file<br><br>The first option is to CLICK on the folder ONCE then press delete.<br><br>The second option is to RIGHT click on the file and select delete<br><br>Whichever option you choose a popup box will appear asking you if you are sure you want to delete the file</p>'
}, {
text: 'Rename a File',
leaf: true,
iconCls: 'pageedit',
icon: 'Icons/silk/icons/page_edit.png',
id: 'rename_a_file',
html: '<center><u>How to rename a file</u></center><br><p>First find the file that you wish to rename<br><br>Now RIGHT click on the file and select rename and enter a new name<br><br>Now press the Enter/Return key.</p>'
}, {
text: 'Copy a File or Folder',
leaf: true,
iconCls: 'pagecopy',
icon: 'Icons/silk/icons/page_copy.png',
id: 'copy_file_folder',
html: '<center><u>How to Copy a File or Folder</u></center><br><p>First find the File/Folder that you wish to copy.<br><br>Now RIGHT click on it and select COPY.<br><br>Now find where you would like to place the copy.<br><br>RIGHT click and select PASTE</p>'
}]}/*, {
text: 'template',
leaf: true,
iconCls: 'template',
icon: 'Icons/silk/icons/.png',
id: 'template',
html: '<center><u></u></center><br><p></p>
}*/, {
text: 'Images',
leaf: false,
icon: 'Icons/silk/icons/image.png',
id: 'instruction_manual',
children: [{
text: 'Instructions 1',
leaf: true,
iconCls: 'page',
icon: 'Icons/silk/icons/page.png',
id: 'instructions_1',
html: '<center><u></u></center><br><p></p>'
}, {
text: 'Instructions 2',
leaf: true,
iconCls: 'page',
icon: 'Icons/silk/icons/page.png',
id: 'instructions_2',
html: '<center><u></u></center><br><p></p>'
}, {
text: 'Instructions 3',
leaf: true,
iconCls: 'page',
icon: 'Icons/silk/icons/page.png',
id: 'instructions_3',
html: '<center><u></u></center><br><p></p>'
}]
}, {
text: 'Menu Option 3',
leaf: true,
iconCls: 'page',
icon: 'Icons/silk/icons/page.png',
id: 'manu_option_3',
html: '<center><u></u></center><br><p></p>'
}]
}),
rootVisible: false,
listeners: {
click: function(node) {
if (node.leaf == true) { var Tab = Ext.getCmp('tabpanel'); if (!Tab.findById(node.id)) Tab.add({ id: node.id, title: node.text, html: node.attributes.html, iconCls: node.attributes.iconCls, closable: true }); Tab.setActiveTab(node.id); }
}
}
},
//start center region
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
id: 'tabpanel',
tabposition: 'top',
overflow: 'auto',
items: [{
title: 'Manual',
id: 'manual',
html: '<center><u>This is an instruction manual that will teach you how to use these tutorials</u></center><br><u>Using the layout</u><br><p>The layout is designed so that you can resize the panels and hide them.<img src="ext-3.0.0/resources/images/default/layout/collapse.gif"/><img src="ext-3.0.0/resources/images/default/layout/expand.gif"/>Clicking the double arrows will expand and collapse the panels.<br>If you hover over the edge of a panel you can click and drag to resize it.If you want to reset the page back to how it was at the start refrest your webbrowser.</p><br><u>How to use the tree menu</u><br><p>If an icon has a small plus at the side of it it means that it is a folder, clicking on the plus will expand the folder revealing more tutorials. when you click on the plus<img src="ext-3.0.0/resources/images/default/tree/elbow-end-plus.gif"/> it will change in to a minus, clicking the minus<img src="ext-3.0.0/resources/images/default/tree/elbow-end-minus.gif"/> will collapse the folder.The name of the folder will be relevant to the tutorials that it contains.</p><br><u>How to open a tutorial</u><br><p>First find the tutorial that you wish to view, clicking on the link will open a new tab with the tutorial in it. The tab will be added in the center window to close the tutorial click on the small cross <img src="ext-3.0.0/resources/images/default/tabs/tab-close.gif"/> on the tab</p><br><u>Glossary</u><br><p>If you do not understand what any of the words in the tutorials mean then click on the glossary link, if you cannot read all of the text then use the scroll bars to move the gird up and down or left and right. You can also resize the columns by hovering over and when an arrow appears click and drag.<br><br>If you would like any more definitions adding please email me at [email protected]</p>',
closable: true,
iconCls: 'manual'
},new Ext.grid.PropertyGrid({
title: 'Glossary',
id: 'glossary',
autoscroll: false,
closable: false,
iconCls: 'glossary',
startEditing: Ext.emptyFn,
striperows:true,
source: {
"Download": "The process in which data is sent to your computer",
"Upload": "Sending data from your computer",
"Data": "Data is information processed or stored by a computer",
"Malware": "This is short for'malicious software' which is designed to damage or do unwanted things to a computer",
"Virus": "Small programs that cause a computers health to deteriorate",
"Worm": "A worm is a type of virus that doesnt alter the files on your pc but it replicates itself",
"Trojan Horse": "Trojan horses are malware that hide as normal programs",
"Spyware": "Programs that spy on your computer",
"Hard Drive": "The hard drive is what stores all of your data",
"URL": "Stands for Uniform Resource Locatoralso known as a website address",
"USB": "Stands for Universal Serial Bus it is a computer port",
"Ram": "Stands for Random Access Memory it is made up of small memory chips on your mother board.",
"Rom": "Stands for Read Only Memory it contains information used by your computer when it is booted up",
"BIOS": "Stands forBasic Input/Output System",
"Operating System": "what your computer runs on",
"Wi-Fi": "Stands forwireless fidelity wifi refers to netrowk components",
"Ethernet": "The most common type of connection used in LAN ",
"Lan": "Stands forLocal Area Network a network that covers a small area",
"Port": "A place where a device is plugged in",
"Adware": "Software that is supported by advertisements",
"Directory": "A directory is a folder",
"File": "A file is a collection of dats in one unit"
}
})]
}, {
region: 'south',
xtype: 'panel',
title: 'Notices',
html: '<p>If you require any more help please email me at</p>',
height: 64,
collapsible: true,
split: true
}]
})
</script>
<div id="content2">
<p>Making IT Easy - A collection of tutorials that will make using a computer very easy and very simple.</p>
</div>
<!--<div id="center1" class="x-hide-display">
<frameset><iframe src="glossary.html" width=100% height=100% scrolling=no></iframe></frameset>
</div>-->
</body>
</html>

jaforom
7 Nov 2011, 3:31 AM
By the config property enableTabScroll:

enableTabScroll:true

Regards.