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
| <html>
| <head>
| <title>Column Layout</title>
|
| <!-- GC -->
|
| <style type="text/css">
| html, body {
| font:normal 12px verdana;
| margin:0;
| padding:0;
| border:0 none;
| overflow:hidden;
| height:100%;
| }
| .x-panel-body p {
| margin:5px;
| }
| .settings {
| background-image:url(../shared/icons/fam/folder_wrench.png) !important;
| }
| .nav {
| background-image:url(../shared/icons/fam/folder_go.png) !important;
| }
| </style>
| <script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
| <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
| <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
| <script type="text/javascript">
| Ext.require(['*']);
|
| 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(Ext.create('Ext.state.CookieProvider'));
|
| var viewport = Ext.create('Ext.Viewport', {
| layout: 'border',
| items:[{
| region: 'west',
| title: 'West',
| split: true,
| width: 200,
| minWidth: 175,
| maxWidth: 400,
| collapsible: true,
| margin: '35 0 5 5',
| layout: {
| type: 'accordion',
| animate: false
| },
| items: [{
| html: Ext.example.shortBogusMarkup,
| title:'Navigation',
| autoScroll:true,
| border:false,
| iconCls:'nav'
| },{
| title:'Settings',
| html: Ext.example.shortBogusMarkup,
| border:false,
| autoScroll:true,
| iconCls:'settings'
| }]
| },{
| region: 'center',
| margin: '35 5 5 0',
| layout: 'column',
| autoScroll: true,
| defaultType: 'container',
| items: [{
| columnWidth: 1/3,
| padding: '5 0 5 5',
| items:[{
| title: 'A Panel',
| html: Ext.example.shortBogusMarkup
| }]
| },{
| columnWidth: 1/3,
| padding: '5 0 5 5',
| items:[{
| title: 'A Panel',
| html: Ext.example.shortBogusMarkup
| }]
| },{
| columnWidth: 1/3,
| padding: 5,
| items:[{
| title: 'A Panel',
| html: Ext.example.shortBogusMarkup
| },{
| margin: '5 0 0 0',
| title: 'Another Panel',
| html: Ext.example.shortBogusMarkup
| }]
| }]
| }]
| });
| });
| </script>
| </head>
| <body>
| </body>
| </html>
|
|
