layout-browser.html
13.5 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS Layout Examples</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- example code -->
<link rel="stylesheet" type="text/css" href="layout-browser.css">
<!-- GC -->
<!-- page specific -->
<script type="text/javascript" src="layouts/basic.js"></script>
<script type="text/javascript" src="layouts/custom.js"></script>
<script type="text/javascript" src="layouts/combination.js"></script>
<script type="text/javascript" src="layout-browser.js"></script>
</head>
<body>
<div style="display:none;">
<!-- Start page content -->
<div id="start-div">
<div style="float:left;" ><img src="images/layout-icon.gif" /></div>
<div style="margin-left:100px;">
<h2>Welcome!</h2>
<p>There are many sample layouts to choose from that should give you a good head start in building your own
application layout. Just like the combination examples, you can mix and match most layouts as
needed, so don't be afraid to experiment!</p>
<p>Select a layout from the tree to the left to begin.</p>
</div>
</div>
<!-- Basic layouts -->
<div id="absolute-details">
<h2>Ext.layout.container.Absolute</h2>
<p>This is a simple layout style that allows you to position items within a container using
CSS-style absolute positioning via XY coordinates.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout: 'absolute',
items:[{
title: 'Panel 1',
x: 50,
y: 50,
html: 'Positioned at x:50, y:50'
}]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Absolute" target="_blank">API Reference</a></p>
</div>
<div id="accordion-details">
<h2>Ext.layout.container.Accordion</h2>
<p>Displays one panel at a time in a stacked layout. No special config properties are required other
than the layout — all panels added to the container will be converted to accordion panels.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout: 'accordion',
items:[{
title: 'Panel 1',
html: 'Content'
},{
title: 'Panel 2',
id: 'panel2',
html: 'Content'
}]
</code></pre>
<p>You can easily customize individual accordion panels by adding styles scoped to the panel by class or id.
For example, to style the panel with id 'panel2' above you could add rules like this:</p>
<pre><code>
#panel2 .x-panel-body {
background:#ffe;
color:#15428B;
}
#panel2 .x-panel-header-text {
color:#555;
}
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Accordion" target="_blank">API Reference</a></p>
</div>
<div id="anchor-details">
<h2>Ext.layout.container.Anchor</h2>
<p>Provides anchoring of contained items to the container's edges. This type of layout is most commonly
seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the
container without hard-coding their dimensions.</p>
<p>In this example, panels are anchored for example purposes so that you can easily see the effect.
If you resize the browser window, the anchored panels will automatically resize to maintain the
same relative dimensions.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout: 'anchor',
items: [{
title: 'Panel 1',
height: 100,
anchor: '50%'
},{
title: 'Panel 2',
height: 100,
anchor: '-100'
},{
title: 'Panel 3',
anchor: '-10, -262'
}]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Anchor" target="_blank">API Reference</a></p>
</div>
<div id="border-details">
<h2>Ext.layout.container.Border</h2>
<p>This Layout Browser page is already a border layout, and this example shows a separate border layout
nested within a region of the page's border layout. Border layouts can be nested with just about any
level of complexity that you might need.</p>
<p>Every border layout <b>must</b> at least have a center region. All other regions are optional.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Footer',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0'
},{
title: 'Navigation',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
},{
title: 'Main Content',
collapsible: false,
region:'center',
margins: '5 0 0 0'
}]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border" target="_blank">API Reference</a></p>
</div>
<div id="card-tabs-details">
<h2>Ext.layout.container.Card (TabPanel)</h2>
<p>The TabPanel component is an excellent example of a sophisticated card layout. Each tab is just
a panel managed by the card layout such that only one is visible at a time. In this case, configuration
is simple since we aren't actually building a card layout from scratch. Don't forget to set the
activeItem config in order to default to the tab that should display first.</p>
<p><b>Sample Config:</b></p>
<pre><code>
xtype: 'tabpanel',
activeTab: 0, // index or id
items:[{
title: 'Tab 1',
html: 'This is tab 1 content.'
},{
title: 'Tab 2',
html: 'This is tab 2 content.'
},{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card" target="_blank">Card layout API Reference</a></p>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.tab.Panel" target="_blank">TabPanel API Reference</a></p>
</div>
<div id="card-wizard-details">
<h2>Ext.layout.container.Card (Wizard)</h2>
<p>You can use a Card layout to create your own custom wizard-style screen. The layout is a standard
CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function
that implements the wizard's business logic (see the code in basic.js for details).</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout:'card',
activeItem: 0, // index or id
bbar: ['->', {
id: 'card-prev',
text: '&laquo; Previous'
},{
id: 'card-next',
text: 'Next &raquo;'
}],
items: [{
id: 'card-0',
html: 'Step 1'
},{
id: 'card-1',
html: 'Step 2'
},{
id: 'card-2',
html: 'Step 3'
}]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card" target="_blank">API Reference</a></p>
</div>
<div id="column-details">
<h2>Ext.layout.container.Column</h2>
<p>This is a useful layout style when you need multiple columns that can have varying content height.
Any fixed-width column widths are calculated first, then any percentage-width columns specified using
the <tt>columnWidth</tt> config will be calculated based on remaining container width. Percentages
should add up to 1 (100%) in order to fill the container.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout:'column',
items: [{
title: 'Width = 25%',
columnWidth: .25,
html: 'Content'
},{
title: 'Width = 75%',
columnWidth: .75,
html: 'Content'
},{
title: 'Width = 250px',
width: 250,
html: 'Content'
}]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Column" target="_blank">API Reference</a></p>
</div>
<div id="fit-details">
<h2>Ext.layout.container.Fit</h2>
<p>A very simple layout that simply fills the container with a single panel. This is usually the best default
layout choice when you have no other specific layout requirements.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout:'fit',
items: {
title: 'Fit Panel',
html: 'Content',
border: false
}
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Fit" target="_blank">API Reference</a></p>
</div>
<div id="table-details">
<h2>Ext.layout.container.Table</h2>
<p>Outputs a standard HTML table as the layout container. This is sometimes useful for complex layouts
where cell spanning is required, or when you want to allow the contents to flow naturally based on standard
browser table layout rules.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout: {
type: 'table',
columns: 4
},
items: [
{html:'1,1',rowspan:3},
{html:'1,2'},
{html:'1,3'},
{html:'2,2',colspan:2},
{html:'3,2'},
{html:'3,3'}
]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Table" target="_blank">API Reference</a></p>
</div>
<div id="vbox-details">
<h2>Ext.layout.container.VBox</h2>
<p>A layout that allows for the vertical and horizontal stretching of child items, much like the container
layout with size management.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', height:150},
{html:'panel 3', flex:2}
]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.VBox" target="_blank">API Reference</a></p>
</div>
<div id="hbox-details">
<h2>Ext.layout.container.HBox</h2>
<p>A layout that allows for the vertical and horizontal stretching of child items, much like the column
layout but can stretch items vertically.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', width:150},
{html:'panel 3', flex:2}
]
</code></pre>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.HBox" target="_blank">API Reference</a></p>
</div>
<!-- Custom layouts -->
<div id="center-details">
<h2>Ext.ux.layout.Center</h2>
<p>This is a custom layout for centering contents within a container. The only requirement is
that the container have a single child panel with a fixed width or a percentage ratio specified.
The child panel can then contain any content, including other components, that will display
centered within the main container. To make the centered panel non-visual, remove the title
and add <tt>border:false</tt> to the child config.</p>
<p><b>Sample Config:</b></p>
<pre><code>
layout:'ux.center',
items: {
title: 'Centered Panel',
widthRatio: 0.75,
html: 'Some content'
}
</code></pre>
</div>
<!-- Combination layouts -->
<div id="tabs-nested-layouts-details">
<h2>Tabs With Nested Layouts</h2>
<p>There are multiple levels of layout nesting within three different TabPanels in this example.
Each tab in a TabPanel can have its own separate layout. As we can see, some have plain content,
while others contain full BorderLayouts. There is also a fully-loaded grid nested down inside
the inner-most tab, showing that there is no limit to how complex your layout can be.</p>
<p>One of the trickiest aspects of deeply nested layouts is dealing with borders on all the
different panels used in the layout. In this example, body padding and region margins are used
extensively to provide space between components so that borders can be displayed naturally in
most cases. A different approach would be to minimize padding and use the config properties
related to borders to turn borders on and off selectively to achieve a slightly different look
and feel.</p>
</div>
<div id="complex-details">
<h2>Complex Layout</h2>
<p></p>
</div>
<!-- Form layouts -->
<div id="abs-form-details">
<h2>Absolute Layout Form</h2>
<p>FormLayout supports absolute positioning in addition to standard anchoring for flexible control over
positioning of fields and labels in containers. In this example, the top and left positions of the labels
and fields are positioned absolute, while the field widths are anchored to the right and/or bottom of the container.</p>
</div>
</div>
</body>
</html>