column.html
3.43 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
<html>
<head>
<title>Column Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all_wev8.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base_wev8.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all_wev8.js"></script>
<!--<script language="javascript" src="../grid/PropsGrid_wev8.js"></script>-->
<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;
}
.x-column-layout-ct .x-panel {
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench_wev8.png) !important;
}
.nav {
background-image:url(../shared/icons/fam/folder_go_wev8.png) !important;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
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',
margins:'35 5 5 0',
layout:'column',
autoScroll:true,
items:[{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel',
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples_wev8.js"></script><!-- EXAMPLES -->
</body>
</html>