JavaScript DHTML/Ext JS/TabPanel
Содержание
- 1 Add gear and help icon to tab header
- 2 Add html editor to tab panel
- 3 Add tab panel to a window
- 4 Add tab to tab panel
- 5 Border layout tab panel
- 6 Closable tab panel
- 7 Create tab, add to tab panel and then add tab panel to a FormPanel
- 8 Disable a tab
- 9 Disabled tab
- 10 Embedded Tab Panel
- 11 Enable tab scroll
- 12 Forms can be a TabPanel
- 13 Grouping tab
- 14 Hold tab panel in a window
- 15 Indicate active tab index
- 16 Nested tab
- 17 Place TabPanel in a ViewPort
- 18 Scrollable tabs with a tabscroller menu
- 19 Set activeTab for TabPanel
- 20 Set minimum tab width
- 21 Set tab resizble to true
- 22 Tab activated event
- 23 Tab change event
- 24 Tabs with auto height that resize to the content. Built from existing markup.
- 25 Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
Add gear and help icon to tab header
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myWin = new Ext.Window({
height : 200,
width : 300,
border : false,
title : "A Window with an accordion layout",
layout : "accordion",
layoutConfig : {
animate : true
},
items : [
{
title : "Instructions",
html : "Please enter information.",
tools : [
{id : "gear"}, {id:"help"}
]
}
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add html editor to tab panel
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var tabs = [
{
title : "Resume",
xtype : "htmleditor",
name : "resume"
},
{
title : "Comment",
xtype : "htmleditor",
name : "bio"
}
]
var tabPanel = {
xtype :"tabpanel",
activeTab : 0,
deferredRender : false,
layoutOnTabChange : true,
border : false,
flex : 1,
plain : true,
items : tabs
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : "Title",
height : 500,
frame : true,
style : "margin: 20",
layout : "vbox",
layoutConfig : {
align : "stretch"
},
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : [
tabPanel
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add tab panel to a window
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var simpleTab = {
title : "My first tab",
html : "This is my first tab!"
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
items : [
simpleTab,
simpleTab,
simpleTab,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : "fit",
items : tabPanel
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add tab to tab panel
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "fit",
title : "Tab",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
items : [
{
title : "our first tab"
}
]
}
});
(function (num) {
for (var i = 1; i <= 30; i++) {
Ext.getCmp("myTPanel").add({
title : "title",
html : "i am tab ",
closable : true
});
}
}).defer(500);
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Border layout tab panel
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var embeddedTabPanel = {
title : "A Complex tab",
layout : "border",
defaults : {
frame : true,
split : true
},
items : [
{
html : "Center Panel",
region : "center"
},
{
html : "North Panel",
region : "north",
height : 25
},
{
html : "West Panel",
region : "west",
height : 25
}
]
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
items : [
embeddedTabPanel,
embeddedTabPanel,
embeddedTabPanel,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : "fit",
items : tabPanel
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Closable tab panel
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var simpleTab = {
title : "My first tab",
html : "This is my first tab!",
closable : true
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
items : [
simpleTab,
simpleTab,
simpleTab,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : "fit",
items : tabPanel
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Create tab, add to tab panel and then add tab panel to a FormPanel
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var tabs = [
{
xtype : "container",
title :"Form fields",
layout : "form",
style : "padding:5px 5px 0",
defaults : {
xtype : "textfield",
width : 230
},
items : [
{
fieldLabel : "First Name",
name : "firstName"
},
{
fieldLabel : "Last Name",
name : "lastName"
},
{
fieldLabel : "Address1",
name : "address1"
},
{
fieldLabel : "Address2",
name : "address2"
}
]
}
]
var tabPanel = {
xtype :"tabpanel",
activeTab : 0,
deferredRender : false,
layoutOnTabChange : true,
border : false,
flex : 1,
plain : true,
items : tabs
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : "Title",
height : 500,
frame : true,
style : "margin: 20",
layout : "vbox",
layoutConfig : {
align : "stretch"
},
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : [
tabPanel
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Disable a tab
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
<!-- Revised from Ext JS Library 3.0.0 -->
<html>
<head>
<title>Hello World Window</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>
<!-- Tabs Example Files -->
<style type="text/css">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
.list {list-style:square;width:500px;padding-left:16px;}
.list li{padding:2px;font-size:8pt;}
pre {
font-size:11px;
}
.x-tab-panel-body .x-panel-body {
padding:10px;
}
/* default loading indicator for ajax calls */
.loading-indicator {
font-size:8pt;
background-image:url("ext-3.0.0/resources/images/default/grid/loading.gif");
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
.new-tab {
background-image:url("ext-3.0.0/examples/feed-viewer/images/new_tab.gif) !important;
}
.tabs {
background-image:url(ext-3.0.0/examples/desktop/images/tabs.gif ) !important;
}
</style>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: "tabs1",
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:"script", title: "Short Text"},
{contentEl:"markup", title: "Long Text"}
]
});
// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: "Normal Tab",
html: "My content was added during construction."
},{
title: "Ajax Tab 1",
autoLoad:"ajax1.htm"
},{
title: "Ajax Tab 2",
autoLoad: {url: "ajax2.htm", params: "foo=bar&wtf=1"}
},{
title: "Event Tab",
listeners: {activate: handleActivate},
html: "I am tab 4"s content. I also have an event listener attached."
},{
title: "Disabled Tab",
disabled:true,
html: "Can"t see me cause I"m disabled"
}
]
});
function handleActivate(tab){
alert(tab.title + " was activated.");
}
});
</script>
</head>
<body>
<h1>Tab Panel Examples</h1>
<p>Note that the js and css is not minified so it is readable. See <a href="tabs-example.js">tabs-example.js</a> for the tab creation code
and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>
<h3>Tabs with auto height that resize to the content. Built from existing markup.</h3><br>
<!-- container for the existing markup tabs -->
<div id="tabs1">
<div id="script" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
</div>
<div id="markup" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div>
</div>
<br>
<h3>Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.</h3>
<ul class="list">
<li>Tab 1 is a normal tab with content passed when adding it.</li>
<li>Tab 2 is loaded via Ajax.</li>
<li>Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.</li>
<li>Tab 4 has an event listener attached.</li>
<li>Tab 5 is disabled.</li>
</ul><br>
</body>
</html>
Disabled tab
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var simpleTab = {
title : "My first tab",
html : "asdf",
disabled : true
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
items : [
simpleTab,
simpleTab,
simpleTab,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : "fit",
items : tabPanel
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Embedded Tab Panel
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var embeddedTabPanel = {
title : "My second tab",
closable : true,
xtype : "tabpanel",
activeTab : 0,
items : [
{
title : "Inner tab 1"
},
{
title : "Inner tab 2"
}
]
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
items : [
embeddedTabPanel,
embeddedTabPanel,
embeddedTabPanel,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : "fit",
items : tabPanel
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Enable tab scroll
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "fit",
title : "Tab",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
items : [
{
title : "our first tab"
}
]
}
});
(function (num) {
for (var i = 1; i <= 30; i++) {
Ext.getCmp("myTPanel").add({
title : "title",
html : "i am tab ",
closable : true
});
}
}).defer(500);
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Forms can be a TabPanel
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</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>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
/*
* Form 4
*/
bd.createChild({tag: "h2", html: "Form 4 - Forms can be a TabPanel..."});
var tabs = new Ext.FormPanel({
labelWidth: 75,
border:false,
width: 350,
items: {
xtype:"tabpanel",
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:"padding:10px"},
items:[{
title:"Personal Details",
layout:"form",
defaults: {width: 230},
defaultType: "textfield",
items: [{
fieldLabel: "First Name",
name: "first",
allowBlank:false,
value: "Jack"
},{
fieldLabel: "Last Name",
name: "last",
value: "Slocum"
},{
fieldLabel: "Company",
name: "company",
value: "Ext JS"
}, {
fieldLabel: "Email",
name: "email",
vtype:"email"
}]
},{
title:"Phone Numbers",
layout:"form",
defaults: {width: 230},
defaultType: "textfield",
items: [{
fieldLabel: "Home",
name: "home",
value: "(888) 555-1212"
},{
fieldLabel: "Business",
name: "business"
},{
fieldLabel: "Mobile",
name: "mobile"
},{
fieldLabel: "Fax",
name: "fax"
}]
}]
},
buttons: [{
text: "Save"
},{
text: "Cancel"
}]
});
tabs.render(document.body);
});
</script>
</div>
</body>
</html>
Grouping tab
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</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>
<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/Portal.css" />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/GroupTab.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/GroupTabPanel.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/GroupTab.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/Portal.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/PortalColumn.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/Portlet.js"></script>
<!-- page specific -->
<script type="text/javascript" src="ext-3.0.0/examples/shared/examples.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/portal/sample-grid.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();
// create some portlet tools using built in Ext tool ids
var tools = [{
id:"gear",
handler: function(){
Ext.Msg.alert("Message", "The Settings tool was clicked.");
}
},{
id:"close",
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
var viewport = new Ext.Viewport({
layout:"fit",
items:[{
xtype: "grouptabpanel",
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: "Tickets",
layout: "fit",
iconCls: "x-icon-tickets",
tabTip: "Tickets tabtip",
style: "padding: 10px;",
items: [new SampleGrid([0,1,2,3,4])]
},
{
xtype: "portal",
title: "Dashboard",
tabTip: "Dashboard tabtip",
items:[{
columnWidth:.33,
style:"padding:10px 0 10px 10px",
items:[{
title: "Grid in a Portlet",
layout:"fit",
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: "Another Panel 1",
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:"padding:10px 0 10px 10px",
items:[{
title: "Panel 2",
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: "Another Panel 2",
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:"padding:10px",
items:[{
title: "Panel 3",
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: "Another Panel 3",
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: "Subscriptions",
iconCls: "x-icon-subscriptions",
tabTip: "Subscriptions tabtip",
style: "padding: 10px;",
layout: "fit",
items: [{
xtype: "tabpanel",
activeTab: 1,
items: [{
title: "Nested Tabs",
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: "Users",
iconCls: "x-icon-users",
tabTip: "Users tabtip",
style: "padding: 10px;",
html: Ext.example.shortBogusMarkup
}]
}, {
expanded: true,
items: [{
title: "Configuration",
iconCls: "x-icon-configuration",
tabTip: "Configuration tabtip",
style: "padding: 10px;",
html: Ext.example.shortBogusMarkup
}, {
title: "Email Templates",
iconCls: "x-icon-templates",
tabTip: "Templates tabtip",
style: "padding: 10px;",
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
});
</script>
</body>
</html>
Hold tab panel in a window
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var simpleTab = {
title : "My first tab",
html : "This is my first tab!"
}
var tabPanel = new Ext.TabPanel({
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
items : [
simpleTab,
simpleTab,
simpleTab,
]
});
new Ext.Window({
height : 300,
width : 400,
layout : "fit",
items : tabPanel
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Indicate active tab index
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "fit",
title : "Tab",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
items : [
{
title : "our first tab"
}
]
}
});
(function (num) {
for (var i = 1; i <= 30; i++) {
Ext.getCmp("myTPanel").add({
title : "title",
html : "i am tab ",
closable : true
});
}
}).defer(500);
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Nested tab
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</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>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function() {
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
// Needed if you want to handle history for multiple components in the same page.
// Should be something that won"t be in component ids.
var tokenDelimiter = ":";
var tp = new Ext.TabPanel({
renderTo: Ext.getBody(),
id: "main-tabs",
height: 300,
width: 600,
activeTab: 0,
items: [{
xtype: "tabpanel",
title: "Tab 1",
id: "tab1",
activeTab: 0,
tabPosition: "bottom",
items: [{
title: "Sub-tab 1",
id: "subtab1"
},{
title: "Sub-tab 2",
id: "subtab2"
},{
title: "Sub-tab 3",
id: "subtab3"
}],
listeners: {
"tabchange": function(tabPanel, tab){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
},{
title: "Tab 2",
id: "tab2"
},{
title: "Tab 3",
id: "tab3"
},{
title: "Tab 4",
id: "tab4"
},{
title: "Tab 5",
id: "tab5"
}],
listeners: {
"tabchange": function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we"re managing history for it also.
// We"ll use its handler instead in that case so we don"t get duplicate nav events for sub tabs.
if(tab.id != "tab1"){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
});
// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on("change", function(token){
if(token){
var parts = token.split(tokenDelimiter);
var tabPanel = Ext.getCmp(parts[0]);
var tabId = parts[1];
tabPanel.show();
tabPanel.setActiveTab(tabId);
}else{
// This is the initial default state. Necessary if you navigate starting from the
// page without any existing history token params and go back to the start state.
tp.setActiveTab(0);
tp.getItem(0).setActiveTab(0);
}
});
});
</script>
<!-- Fields required for history management -->
<form id="history-form" class="x-hidden">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
</body>
</html>
Place TabPanel in a ViewPort
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</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>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout: "border",
items: [
// create instance immediately
new Ext.BoxComponent({
region: "north",
height: 32, // give north and south regions a height
autoEl: {
tag: "div",
html:"<p>north - generally for menus, toolbars and/or advertisements</p>"
}
}), {
// lazily created panel (xtype:"panel" is default)
region: "south",
contentEl: "south",
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: "South",
margins: "0 0 0 0"
}, {
region: "east",
title: "East Side",
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: "0 5 0 0",
layout: "fit", // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don"t add another border
activeTab: 1, // second tab initially active
tabPosition: "bottom",
items: [{
html: "<p>A TabPanel component can be a region.</p>",
title: "A Tab",
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: "Property Grid",
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse("10/15/2006")),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: "west",
id: "west-panel", // see Ext.getCmp() below
title: "West",
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: "0 0 0 5",
layout: {
type: "accordion",
animate: true
},
items: [{
contentEl: "west",
title: "Navigation",
border: false,
iconCls: "nav" // see the HEAD section for style used
}, {
title: "Settings",
html: "<p>Some settings in here.</p>",
border: false,
iconCls: "settings"
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
new Ext.TabPanel({
region: "center", // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: "center1",
title: "Close Me",
closable: true,
autoScroll: true
}, {
contentEl: "center2",
title: "Center Panel",
autoScroll: true
}]
})]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on("click", function(){
// get a reference to the Panel that was created with id = "west-panel"
var w = Ext.getCmp("west-panel");
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
});
</script>
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<p>Hi. I"m the west panel.</p>
</div>
<div id="center2" class="x-hide-display">
<a id="hideit" href="#">Toggle the west region</a>
<p>My closable attribute is set to false so you can"t close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn"t taken up by the border regions.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1" class="x-hide-display">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="x-hide-display">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>
</body>
</html>
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</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>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/tabs/tab-scroller-menu.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/TabScrollerMenu.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();
// Create our instance of tabScrollerMenu
var scrollerMenu = new Ext.ux.TabScrollerMenu({
maxText : 15,
pageSize : 5
});
new Ext.Window({
height : 200,
width : 400,
layout : "fit",
title : "Exercising scrollable tabs with a tabscroller menu",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
border : false,
plugins : [ scrollerMenu ],
items : [
{
title : "our first tab"
}
]
}
}).show();
// Add a bunch of tabs dynamically
var tabLimit = 22;
(function (num) {
for (var i = 1; i <= tabLimit; i++) {
var title = "Tab # " + i;
Ext.getCmp("myTPanel").add({
title : title,
html : "Hi, i am tab " + i,
tabTip : title,
closable : true
});
}
}).defer(1000);
});
</script>
</head>
<body>
</body>
</html>
Set activeTab for TabPanel
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</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>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
/*
* Form 5
*/
bd.createChild({tag: "h2", html: "Form 5 - ... and forms can contain TabPanel(s)"});
var tab2 = new Ext.FormPanel({
labelAlign: "top",
title: "Inner Tabs",
bodyStyle:"padding:5px",
width: 600,
items: [{
layout:"column",
border:false,
items:[{
columnWidth:.5,
layout: "form",
border:false,
items: [{
xtype:"textfield",
fieldLabel: "First Name",
name: "first",
anchor:"95%"
}, {
xtype:"textfield",
fieldLabel: "Company",
name: "company",
anchor:"95%"
}]
},{
columnWidth:.5,
layout: "form",
border:false,
items: [{
xtype:"textfield",
fieldLabel: "Last Name",
name: "last",
anchor:"95%"
},{
xtype:"textfield",
fieldLabel: "Email",
name: "email",
vtype:"email",
anchor:"95%"
}]
}]
},{
xtype:"tabpanel",
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:"padding:10px"},
items:[{
title:"Personal Details",
layout:"form",
defaults: {width: 230},
defaultType: "textfield",
items: [{
fieldLabel: "First Name",
name: "first",
allowBlank:false,
value: "Jack"
},{
fieldLabel: "Last Name",
name: "last",
value: "Slocum"
},{
fieldLabel: "Company",
name: "company",
value: "Ext JS"
}, {
fieldLabel: "Email",
name: "email",
vtype:"email"
}]
},{
title:"Phone Numbers",
layout:"form",
defaults: {width: 230},
defaultType: "textfield",
items: [{
fieldLabel: "Home",
name: "home",
value: "(888) 555-1212"
},{
fieldLabel: "Business",
name: "business"
},{
fieldLabel: "Mobile",
name: "mobile"
},{
fieldLabel: "Fax",
name: "fax"
}]
},{
cls:"x-plain",
title:"Biography",
layout:"fit",
items: {
xtype:"htmleditor",
id:"bio2",
fieldLabel:"Biography"
}
}]
}],
buttons: [{
text: "Save"
},{
text: "Cancel"
}]
});
tab2.render(document.body);
});
</script>
</div>
</body>
</html>
Set minimum tab width
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "fit",
title : "Tab",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
items : [
{
title : "our first tab"
}
]
}
});
(function (num) {
for (var i = 1; i <= 30; i++) {
Ext.getCmp("myTPanel").add({
title : "title",
html : "i am tab ",
closable : true
});
}
}).defer(500);
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set tab resizble to true
<html>
<head>
<title>Hello World Window</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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "fit",
title : "Tab",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
items : [
{
title : "our first tab"
}
]
}
});
(function (num) {
for (var i = 1; i <= 30; i++) {
Ext.getCmp("myTPanel").add({
title : "title",
html : "i am tab ",
closable : true
});
}
}).defer(500);
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Tab activated event
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
<!-- Revised from Ext JS Library 3.0.0 -->
<html>
<head>
<title>Hello World Window</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>
<!-- Tabs Example Files -->
<style type="text/css">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
.list {list-style:square;width:500px;padding-left:16px;}
.list li{padding:2px;font-size:8pt;}
pre {
font-size:11px;
}
.x-tab-panel-body .x-panel-body {
padding:10px;
}
/* default loading indicator for ajax calls */
.loading-indicator {
font-size:8pt;
background-image:url("ext-3.0.0/resources/images/default/grid/loading.gif");
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
.new-tab {
background-image:url("ext-3.0.0/examples/feed-viewer/images/new_tab.gif) !important;
}
.tabs {
background-image:url(ext-3.0.0/examples/desktop/images/tabs.gif ) !important;
}
</style>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: "tabs1",
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:"script", title: "Short Text"},
{contentEl:"markup", title: "Long Text"}
]
});
// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: "Normal Tab",
html: "My content was added during construction."
},{
title: "Ajax Tab 1",
autoLoad:"ajax1.htm"
},{
title: "Ajax Tab 2",
autoLoad: {url: "ajax2.htm", params: "foo=bar&wtf=1"}
},{
title: "Event Tab",
listeners: {activate: handleActivate},
html: "I am tab 4"s content. I also have an event listener attached."
},{
title: "Disabled Tab",
disabled:true,
html: "Can"t see me cause I"m disabled"
}
]
});
function handleActivate(tab){
alert(tab.title + " was activated.");
}
});
</script>
</head>
<body>
<h1>Tab Panel Examples</h1>
<p>Note that the js and css is not minified so it is readable. See <a href="tabs-example.js">tabs-example.js</a> for the tab creation code
and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>
<h3>Tabs with auto height that resize to the content. Built from existing markup.</h3><br>
<!-- container for the existing markup tabs -->
<div id="tabs1">
<div id="script" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
</div>
<div id="markup" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div>
</div>
<br>
<h3>Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.</h3>
<ul class="list">
<li>Tab 1 is a normal tab with content passed when adding it.</li>
<li>Tab 2 is loaded via Ajax.</li>
<li>Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.</li>
<li>Tab 4 has an event listener attached.</li>
<li>Tab 5 is disabled.</li>
</ul><br>
</body>
</html>
Tab change event
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</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>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function() {
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
// Needed if you want to handle history for multiple components in the same page.
// Should be something that won"t be in component ids.
var tokenDelimiter = ":";
var tp = new Ext.TabPanel({
renderTo: Ext.getBody(),
id: "main-tabs",
height: 300,
width: 600,
activeTab: 0,
items: [{
xtype: "tabpanel",
title: "Tab 1",
id: "tab1",
activeTab: 0,
tabPosition: "bottom",
items: [{
title: "Sub-tab 1",
id: "subtab1"
},{
title: "Sub-tab 2",
id: "subtab2"
},{
title: "Sub-tab 3",
id: "subtab3"
}],
listeners: {
"tabchange": function(tabPanel, tab){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
},{
title: "Tab 2",
id: "tab2"
},{
title: "Tab 3",
id: "tab3"
},{
title: "Tab 4",
id: "tab4"
},{
title: "Tab 5",
id: "tab5"
}],
listeners: {
"tabchange": function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we"re managing history for it also.
// We"ll use its handler instead in that case so we don"t get duplicate nav events for sub tabs.
if(tab.id != "tab1"){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
});
// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on("change", function(token){
if(token){
var parts = token.split(tokenDelimiter);
var tabPanel = Ext.getCmp(parts[0]);
var tabId = parts[1];
tabPanel.show();
tabPanel.setActiveTab(tabId);
}else{
// This is the initial default state. Necessary if you navigate starting from the
// page without any existing history token params and go back to the start state.
tp.setActiveTab(0);
tp.getItem(0).setActiveTab(0);
}
});
});
</script>
<!-- Fields required for history management -->
<form id="history-form" class="x-hidden">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
</body>
</html>
Tabs with auto height that resize to the content. Built from existing markup.
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
<!-- Revised from Ext JS Library 3.0.0 -->
<html>
<head>
<title>Hello World Window</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>
<!-- Tabs Example Files -->
<style type="text/css">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
.list {list-style:square;width:500px;padding-left:16px;}
.list li{padding:2px;font-size:8pt;}
pre {
font-size:11px;
}
.x-tab-panel-body .x-panel-body {
padding:10px;
}
/* default loading indicator for ajax calls */
.loading-indicator {
font-size:8pt;
background-image:url("ext-3.0.0/resources/images/default/grid/loading.gif");
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
.new-tab {
background-image:url("ext-3.0.0/examples/feed-viewer/images/new_tab.gif) !important;
}
.tabs {
background-image:url(ext-3.0.0/examples/desktop/images/tabs.gif ) !important;
}
</style>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: "tabs1",
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:"script", title: "Short Text"},
{contentEl:"markup", title: "Long Text"}
]
});
// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: "Normal Tab",
html: "My content was added during construction."
},{
title: "Ajax Tab 1",
autoLoad:"ajax1.htm"
},{
title: "Ajax Tab 2",
autoLoad: {url: "ajax2.htm", params: "foo=bar&wtf=1"}
},{
title: "Event Tab",
listeners: {activate: handleActivate},
html: "I am tab 4"s content. I also have an event listener attached."
},{
title: "Disabled Tab",
disabled:true,
html: "Can"t see me cause I"m disabled"
}
]
});
function handleActivate(tab){
alert(tab.title + " was activated.");
}
});
</script>
</head>
<body>
<h1>Tab Panel Examples</h1>
<p>Note that the js and css is not minified so it is readable. See <a href="tabs-example.js">tabs-example.js</a> for the tab creation code
and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>
<h3>Tabs with auto height that resize to the content. Built from existing markup.</h3><br>
<!-- container for the existing markup tabs -->
<div id="tabs1">
<div id="script" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
</div>
<div id="markup" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div>
</div>
<br>
<h3>Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.</h3>
<ul class="list">
<li>Tab 1 is a normal tab with content passed when adding it.</li>
<li>Tab 2 is loaded via Ajax.</li>
<li>Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.</li>
<li>Tab 4 has an event listener attached.</li>
<li>Tab 5 is disabled.</li>
</ul><br>
</body>
</html>
Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
<!-- Revised from Ext JS Library 3.0.0 -->
<html>
<head>
<title>Hello World Window</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>
<!-- Tabs Example Files -->
<style type="text/css">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
.list {list-style:square;width:500px;padding-left:16px;}
.list li{padding:2px;font-size:8pt;}
pre {
font-size:11px;
}
.x-tab-panel-body .x-panel-body {
padding:10px;
}
/* default loading indicator for ajax calls */
.loading-indicator {
font-size:8pt;
background-image:url("ext-3.0.0/resources/images/default/grid/loading.gif");
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
.new-tab {
background-image:url("ext-3.0.0/examples/feed-viewer/images/new_tab.gif) !important;
}
.tabs {
background-image:url(ext-3.0.0/examples/desktop/images/tabs.gif ) !important;
}
</style>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: "tabs1",
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:"script", title: "Short Text"},
{contentEl:"markup", title: "Long Text"}
]
});
// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: "Normal Tab",
html: "My content was added during construction."
},{
title: "Ajax Tab 1",
autoLoad:"ajax1.htm"
},{
title: "Ajax Tab 2",
autoLoad: {url: "ajax2.htm", params: "foo=bar&wtf=1"}
},{
title: "Event Tab",
listeners: {activate: handleActivate},
html: "I am tab 4"s content. I also have an event listener attached."
},{
title: "Disabled Tab",
disabled:true,
html: "Can"t see me cause I"m disabled"
}
]
});
function handleActivate(tab){
alert(tab.title + " was activated.");
}
});
</script>
</head>
<body>
<h1>Tab Panel Examples</h1>
<p>Note that the js and css is not minified so it is readable. See <a href="tabs-example.js">tabs-example.js</a> for the tab creation code
and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>
<h3>Tabs with auto height that resize to the content. Built from existing markup.</h3><br>
<!-- container for the existing markup tabs -->
<div id="tabs1">
<div id="script" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
</div>
<div id="markup" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div>
</div>
<br>
<h3>Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.</h3>
<ul class="list">
<li>Tab 1 is a normal tab with content passed when adding it.</li>
<li>Tab 2 is loaded via Ajax.</li>
<li>Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.</li>
<li>Tab 4 has an event listener attached.</li>
<li>Tab 5 is disabled.</li>
</ul><br>
</body>
</html>