]> git.proxmox.com Git - extjs.git/blame - extjs/build/examples/classic/grouptabs/grouptabs.js
add extjs 6.0.1 sources
[extjs.git] / extjs / build / examples / classic / grouptabs / grouptabs.js
CommitLineData
6527f429
DM
1Ext.onReady(function () {\r
2 Ext.tip.QuickTipManager.init();\r
3\r
4 // create some portlet tools using built in Ext tool ids\r
5 var tools = [{\r
6 type: 'gear',\r
7 handler: function () {\r
8 Ext.Msg.alert('Message', 'The Settings tool was clicked.');\r
9 }\r
10 }, {\r
11 type: 'close',\r
12 handler: function (e, target, panel) {\r
13 panel.ownerCt.remove(panel, true);\r
14 }\r
15 }];\r
16\r
17 Ext.create('Ext.Viewport', {\r
18 layout: 'fit',\r
19 items: [{\r
20 xtype: 'grouptabpanel',\r
21 activeGroup: 0,\r
22 items: [{\r
23 mainItem: 1,\r
24 items: [{\r
25 title: 'Tickets',\r
26 iconCls: 'x-icon-tickets',\r
27 tabTip: 'Tickets tabtip',\r
28 //border: false,\r
29 xtype: 'stocks',\r
30 margin: '10',\r
31 height: null\r
32 }, {\r
33 xtype: 'portalpanel',\r
34 title: 'Dashboard',\r
35 tabTip: 'Dashboard tabtip',\r
36 border: false,\r
37 items: [{\r
38 flex: 1,\r
39 items: [{\r
40 title: 'Portlet 1',\r
41 html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>'\r
42 }, {\r
43\r
44 title: 'Stock Portlet',\r
45 items: {\r
46 xtype: 'markets'\r
47 }\r
48 }, {\r
49 title: 'Portlet 2',\r
50 html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>'\r
51 }]\r
52 }]\r
53 }, {\r
54 title: 'Subscriptions',\r
55 iconCls: 'x-icon-subscriptions',\r
56 tabTip: 'Subscriptions tabtip',\r
57 style: 'padding: 10px;',\r
58 border: false,\r
59 layout: 'fit',\r
60 items: [{\r
61 xtype: 'tabpanel',\r
62 activeTab: 0,\r
63 items: [{\r
64 title: 'Nested Tabs',\r
65 html: Ext.example.shortBogusMarkup\r
66 }]\r
67 }]\r
68 }, {\r
69 title: 'Users',\r
70 iconCls: 'x-icon-users',\r
71 tabTip: 'Users tabtip',\r
72 style: 'padding: 10px;',\r
73 html: Ext.example.shortBogusMarkup\r
74 }]\r
75 }, {\r
76 expanded: true,\r
77 items: [{\r
78 title: 'Configuration',\r
79 iconCls: 'x-icon-configuration',\r
80 tabTip: 'Configuration tabtip',\r
81 style: 'padding: 10px;',\r
82 html: Ext.example.shortBogusMarkup\r
83 }, {\r
84 title: 'Email Templates',\r
85 iconCls: 'x-icon-templates',\r
86 tabTip: 'Templates tabtip',\r
87 style: 'padding: 10px;',\r
88 border: false,\r
89 items: {\r
90 xtype: 'form',\r
91 // since we are not using the default 'panel' xtype, we must specify it\r
92 id: 'form-panel',\r
93 labelWidth: 75,\r
94 title: 'Form Layout',\r
95 bodyStyle: 'padding:15px',\r
96 labelPad: 20,\r
97 defaults: {\r
98 width: 230,\r
99 labelSeparator: '',\r
100 msgTarget: 'side'\r
101 },\r
102 defaultType: 'textfield',\r
103 items: [{\r
104 fieldLabel: 'First Name',\r
105 name: 'first',\r
106 allowBlank: false\r
107 }, {\r
108 fieldLabel: 'Last Name',\r
109 name: 'last'\r
110 }, {\r
111 fieldLabel: 'Company',\r
112 name: 'company'\r
113 }, {\r
114 fieldLabel: 'Email',\r
115 name: 'email',\r
116 vtype: 'email'\r
117 }],\r
118 buttons: [{\r
119 text: 'Save'\r
120 }, {\r
121 text: 'Cancel'\r
122 }]\r
123 }\r
124 }]\r
125 }, {\r
126 expanded: false,\r
127 items: {\r
128 title: 'Single item in third',\r
129 bodyPadding: 10,\r
130 html: '<h1>The third tab group only has a single entry.<br>This is to test the tab being tagged with both "first" and "last" classes to ensure rounded corners are applied top and bottom</h1>',\r
131 border: false\r
132 }\r
133 }]\r
134 }]\r
135 });\r
136});