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