Created
October 10, 2013 19:02
-
-
Save emayk/6923666 to your computer and use it in GitHub Desktop.
create-tab-new-tab-exjs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> | |
| <title>BadMonkey.com - Demo App</title> | |
| <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script> | |
| <script type="text/javascript"> | |
| Ext.onReady(function() { | |
| var treeStore = Ext.create('Ext.data.TreeStore', { | |
| root: { | |
| expanded: true, | |
| children: [{ | |
| text: "Admin", | |
| expanded: true, | |
| id: 'admin', | |
| children: [{ | |
| text: 'Locations', | |
| leaf: true, | |
| id: 'admin_locations' | |
| },{ | |
| text: 'Users', | |
| leaf: true, | |
| id: 'admin_users' | |
| }] | |
| },{ | |
| text: "Utilities", | |
| expanded: true, | |
| id: 'Utilities', | |
| children: [{ | |
| text: "Reports", | |
| leaf: true , | |
| id: 'util_reports' | |
| },{ | |
| text: "System Maintenance", | |
| leaf: true, | |
| id: 'util_maintenance' | |
| }] | |
| }] | |
| } | |
| }); | |
| var treePanel = Ext.create('Ext.tree.Panel', { | |
| region: 'west', | |
| title: 'Menu', | |
| width: 200, | |
| height: 150, | |
| listeners: { | |
| itemclick: function(view, record, item, index, evt, eOpts) { | |
| var menuId = record.get('id'); | |
| var nodeText = record.get('text'); | |
| // if it's a branch, display node text. | |
| if (!record.get('leaf')) { | |
| Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText); | |
| return; | |
| } | |
| var tabPanel = this.up('viewport').down('tabpanel'); | |
| // see if the target tab already exists. | |
| var childTab = tabPanel.child('#' + menuId); | |
| // if not, create it. | |
| if (childTab == null) { | |
| childTab = Ext.create('Ext.panel.Panel', { | |
| xtype: 'panel', | |
| bodyPadding: 5, | |
| html: 'This is the ' + nodeText + ' Tab content', | |
| itemId: menuId, | |
| title: nodeText | |
| }); | |
| tabPanel.add(childTab); | |
| } | |
| // set the tab active/visible. | |
| tabPanel.setActiveTab(childTab); | |
| } | |
| }, | |
| store: treeStore, | |
| rootVisible: false | |
| }); | |
| Ext.create('Ext.container.Viewport', { | |
| layout: 'border', | |
| items: [{ | |
| xtype: 'panel', | |
| region: 'north', | |
| collapsible: true, | |
| frame: true, | |
| height: 65, | |
| html: '<span style="font-size: 24px;">Application Name Here</span>', | |
| title: 'BadMonkey.com' | |
| }, | |
| treePanel | |
| ,{ | |
| xtype: 'tabpanel', | |
| region: 'center', | |
| items: [{ | |
| xtype: 'panel', | |
| bodyPadding: 5, | |
| itemId: 'home', | |
| title: 'Home', | |
| html: 'Home Page Content Here' | |
| }] | |
| },{ | |
| xtype: 'panel', | |
| region: 'south', | |
| frame: true, | |
| height: 32, | |
| layout: { | |
| type: 'hbox', | |
| align: 'stretch', | |
| pack: 'start' | |
| }, | |
| items: [{ | |
| xtype: 'container', | |
| html: '© 2012, BadMonkey.com' | |
| },{ | |
| xtype: 'container', | |
| flex: 1, | |
| html: '<a href="mailto:[email protected]?Subject=Bad monkey, needs spanking...">Email Support</a>', | |
| style: { | |
| textAlign: 'right' | |
| } | |
| }] | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment