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
| Ext.require([
| 'Ext.tab.Panel'
| ]);
|
| Ext.onReady(function() {
|
| Ext.create('Ext.tab.Panel', {
| renderTo: 'left-tabs',
| tabPosition: 'left',
| height: 360,
| width: 300,
| defaults: {
| bodyPadding: 10
| },
| items: [
| { title: 'Tab 1', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
| { title: 'Tab 2', html: Ext.example.bogusMarkup, closable: true },
| { title: 'Tab 3', html: Ext.example.bogusMarkup },
| { title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true }
| ]
| });
|
| Ext.create('Ext.tab.Panel', {
| renderTo: 'right-tabs',
| tabPosition: 'right',
| height: 360,
| width: 300,
| defaults: {
| bodyPadding: 10
| },
| items: [
| { title: 'Tab 1', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
| { title: 'Tab 2', html: Ext.example.bogusMarkup, closable: true },
| { title: 'Tab 3', html: Ext.example.bogusMarkup },
| { title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true }
| ]
| });
|
| Ext.create('Ext.tab.Panel', {
| renderTo: 'left-scroll-tabs',
| tabPosition: 'left',
| height: 300,
| width: 300,
| defaults: {
| bodyPadding: 10
| },
| items: [
| { title: 'Tab 1', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
| { title: 'Tab 2', html: Ext.example.bogusMarkup, closable: true },
| { title: 'Tab 3', html: Ext.example.bogusMarkup },
| { title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true },
| { title: 'Tab 4', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
| { title: 'Tab 5', html: Ext.example.bogusMarkup, closable: true },
| { title: 'Tab 6', html: Ext.example.bogusMarkup },
| { title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true }
| ]
| });
|
| Ext.create('Ext.tab.Panel', {
| renderTo: 'right-scroll-tabs',
| tabPosition: 'right',
| height: 300,
| width: 300,
| defaults: {
| bodyPadding: 10
| },
| items: [
| { title: 'Tab 1', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
| { title: 'Tab 2', html: Ext.example.bogusMarkup, closable: true },
| { title: 'Tab 3', html: Ext.example.bogusMarkup },
| { title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true },
| { title: 'Tab 4', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
| { title: 'Tab 5', html: Ext.example.bogusMarkup, closable: true },
| { title: 'Tab 6', html: Ext.example.bogusMarkup },
| { title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true }
| ]
| });
|
| });
|
|
