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 Tab Panel Examples
- 9.1 Tabs with auto height that resize to the content. Built from existing markup.
- 9.2 Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
- 9.3 Disabled tab
- 9.4 Embedded Tab Panel
- 9.5 Enable tab scroll
- 9.6 Forms can be a TabPanel
- 9.7 Grouping tab
- 9.8 Hold tab panel in a window
- 9.9 Indicate active tab index
- 9.10 Nested tab
- 9.11 Place TabPanel in a ViewPort
- 9.12 Scrollable tabs with a tabscroller menu
- 9.13 Set activeTab for TabPanel
- 9.14 Set minimum tab width
- 9.15 Set tab resizble to true
- 9.16 Tab activated event
- 10 Tab Panel Examples
- 11 Tab Panel Examples
- 12 Tab Panel Examples
Add gear and help icon to tab header
<source lang="html4strict">
<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>
</body> </html>
</source>
Add html editor to tab panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Add tab panel to a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Add tab to tab panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Border layout tab panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Closable tab panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Create tab, add to tab panel and then add tab panel to a FormPanel
<source lang="html4strict">
<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>
</body> </html>
</source>
Disable a tab
<source lang="html4strict">
/*!
* 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>
<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>
Tab Panel Examples
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.
Tabs with auto height that resize to the content. Built from existing markup.
Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
- Tab 1 is a normal tab with content passed when adding it.
- Tab 2 is loaded via Ajax.
- Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.
- Tab 4 has an event listener attached.
- Tab 5 is disabled.
</body> </html>
</source>
Disabled tab
<source lang="html4strict">
<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>
</body> </html>
</source>
Embedded Tab Panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Enable tab scroll
<source lang="html4strict">
<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>
</body> </html>
</source>
Forms can be a TabPanel
<source lang="html4strict">
<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 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>
</source>
Grouping tab
<source lang="html4strict">
<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/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> <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>
<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>
</source>
Hold tab panel in a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Indicate active tab index
<source lang="html4strict">
<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>
</body> </html>
</source>
Nested tab
<source lang="html4strict">
<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 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>
<form id="history-form" class="x-hidden">
<input type="hidden" id="x-history-field" /> <iframe id="x-history-frame"></iframe>
</form> </body> </html>
</source>
Place TabPanel in a ViewPort
<source lang="html4strict">
<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(){ // 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:"
north - generally for menus, toolbars and/or advertisements
"} }), { // 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: "
A TabPanel component can be a region.
",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: "
Some settings in here.
",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>
</body> </html>
</source>
<source lang="html4strict">
<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>
</source>
Set activeTab for TabPanel
<source lang="html4strict">
<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 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>
</source>
Set minimum tab width
<source lang="html4strict">
<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>
</body> </html>
</source>
Set tab resizble to true
<source lang="html4strict">
<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>
</body> </html>
</source>
Tab activated event
<source lang="html4strict">
/*!
* 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>
<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>
Tab Panel Examples
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.
Tabs with auto height that resize to the content. Built from existing markup.
Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
- Tab 1 is a normal tab with content passed when adding it.
- Tab 2 is loaded via Ajax.
- Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.
- Tab 4 has an event listener attached.
- Tab 5 is disabled.
</body> </html>
</source>
Tab change event
<source lang="html4strict">
<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 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>
<form id="history-form" class="x-hidden">
<input type="hidden" id="x-history-field" /> <iframe id="x-history-frame"></iframe>
</form> </body> </html>
</source>
Tabs with auto height that resize to the content. Built from existing markup.
<source lang="html4strict">
/*!
* 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>
<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>
Tab Panel Examples
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.
Tabs with auto height that resize to the content. Built from existing markup.
Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
- Tab 1 is a normal tab with content passed when adding it.
- Tab 2 is loaded via Ajax.
- Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.
- Tab 4 has an event listener attached.
- Tab 5 is disabled.
</body> </html>
</source>
Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
<source lang="html4strict">
/*!
* 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>
<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>
Tab Panel Examples
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.
Tabs with auto height that resize to the content. Built from existing markup.
Tabs with no tab strip and a fixed height that scroll the content. Built entirely with javascript.
- Tab 1 is a normal tab with content passed when adding it.
- Tab 2 is loaded via Ajax.
- Tab 3 is loaded via Ajax too. It was set up to pass parameters when loaded.
- Tab 4 has an event listener attached.
- Tab 5 is disabled.
</body> </html>
</source>