← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/examples/layout-browser/layout-browser.html

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/examples/layout-browser/layout-browser.html
 
1
<html>
 
2
<head>
 
3
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
4
    <title>ExtJS Layout Examples</title>
 
5
 
 
6
    <!-- ** CSS ** -->
 
7
    <!-- base library -->
 
8
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
9
 
 
10
    <!-- overrides to base library -->
 
11
    <link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />
 
12
 
 
13
    <!-- page specific -->
 
14
    <link rel="stylesheet" type="text/css" href="layout-browser.css">
 
15
 
 
16
    <!-- ** Javascript ** -->
 
17
    <!-- ExtJS library: base/adapter -->
 
18
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 
19
 
 
20
    <!-- ExtJS library: all widgets -->
 
21
    <script type="text/javascript" src="../../ext-all.js"></script>
 
22
 
 
23
    <!-- overrides to base library -->
 
24
 
 
25
    <!-- extensions -->
 
26
    <script type="text/javascript" src="../ux/CenterLayout.js"></script>
 
27
    <script type="text/javascript" src="../ux/RowLayout.js"></script>
 
28
 
 
29
    <!-- page specific -->
 
30
    <script type="text/javascript" src="layouts/basic.js"></script>
 
31
    <script type="text/javascript" src="layouts/custom.js"></script>
 
32
    <script type="text/javascript" src="layouts/combination.js"></script>
 
33
    <script type="text/javascript" src="layout-browser.js"></script>
 
34
 
 
35
</head>
 
36
<body>
 
37
    <div id="header"><h1>Ext Layout Browser</h1></div>
 
38
    <div style="display:none;">
 
39
 
 
40
        <!-- Start page content -->
 
41
        <div id="start-div">
 
42
            <div style="float:left;" ><img src="images/layout-icon.gif" /></div>
 
43
            <div style="margin-left:100px;">
 
44
                <h2>Welcome!</h2>
 
45
                <p>There are many sample layouts to choose from that should give you a good head start in building your own
 
46
                application layout.  Just like the combination examples, you can mix and match most layouts as
 
47
                needed, so don't be afraid to experiment!</p>
 
48
                <p>Select a layout from the tree to the left to begin.</p>
 
49
            </div>
 
50
        </div>
 
51
 
 
52
        <!-- Basic layouts -->
 
53
        <div id="absolute-details">
 
54
            <h2>Ext.layout.AbsoluteLayout</h2>
 
55
            <p>This is a simple layout style that allows you to position items within a container using
 
56
            CSS-style absolute positioning via XY coordinates.</p>
 
57
            <p><b>Sample Config:</b></p>
 
58
            <pre><code>
 
59
layout: 'absolute',
 
60
items:[{
 
61
    title: 'Panel 1',
 
62
    x: 50,
 
63
    y: 50,
 
64
    html: 'Positioned at x:50, y:50'
 
65
}]
 
66
            </code></pre>
 
67
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AbsoluteLayout" target="_blank">API Reference</a></p>
 
68
        </div>
 
69
        <div id="accordion-details">
 
70
            <h2>Ext.layout.Accordion</h2>
 
71
            <p>Displays one panel at a time in a stacked layout.  No special config properties are required other
 
72
            than the layout &mdash; all panels added to the container will be converted to accordion panels.</p>
 
73
            <p><b>Sample Config:</b></p>
 
74
            <pre><code>
 
75
layout: 'accordion',
 
76
items:[{
 
77
    title: 'Panel 1',
 
78
    html: 'Content'
 
79
},{
 
80
    title: 'Panel 2',
 
81
    id: 'panel2',
 
82
    html: 'Content'
 
83
}]
 
84
            </code></pre>
 
85
            <p>You can easily customize individual accordion panels by adding styles scoped to the panel by class or id.
 
86
            For example, to style the panel with id 'panel2' above you could add rules like this:</p>
 
87
            <pre><code>
 
88
#panel2 .x-panel-body {
 
89
    background:#ffe;
 
90
    color:#15428B;
 
91
}
 
92
#panel2 .x-panel-header-text {
 
93
    color:#555;
 
94
}
 
95
            </code></pre>
 
96
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.Accordion" target="_blank">API Reference</a></p>
 
97
        </div>
 
98
        <div id="anchor-details">
 
99
            <h2>Ext.layout.AnchorLayout</h2>
 
100
            <p>Provides anchoring of contained items to the container's edges.  This type of layout is most commonly
 
101
            seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the
 
102
            container without hard-coding their dimensions.</p>
 
103
            <p>In this example, panels are anchored for example purposes so that you can easily see the effect.
 
104
            If you resize the browser window, the anchored panels will automatically resize to maintain the
 
105
            same relative dimensions.</p>
 
106
            <p><b>Sample Config:</b></p>
 
107
            <pre><code>
 
108
layout: 'anchor',
 
109
items: [{
 
110
    title: 'Panel 1',
 
111
    height: 100,
 
112
    anchor: '50%'
 
113
},{
 
114
    title: 'Panel 2',
 
115
    height: 100,
 
116
    anchor: '-100'
 
117
},{
 
118
    title: 'Panel 3',
 
119
    anchor: '-10, -262'
 
120
}]
 
121
            </code></pre>
 
122
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout" target="_blank">API Reference</a></p>
 
123
        </div>
 
124
        <div id="border-details">
 
125
            <h2>Ext.layout.BorderLayout</h2>
 
126
            <p>This Layout Browser page is already a border layout, and this example shows a separate border layout
 
127
            nested within a region of the page's border layout.  Border layouts can be nested with just about any
 
128
            level of complexity that you might need.</p>
 
129
            <p>Every border layout <b>must</b> at least have a center region.  All other regions are optional.</p>
 
130
            <p><b>Sample Config:</b></p>
 
131
            <pre><code>
 
132
layout:'border',
 
133
defaults: {
 
134
    collapsible: true,
 
135
    split: true,
 
136
    bodyStyle: 'padding:15px'
 
137
},
 
138
items: [{
 
139
    title: 'Footer',
 
140
    region: 'south',
 
141
    height: 150,
 
142
    minSize: 75,
 
143
    maxSize: 250,
 
144
    cmargins: '5 0 0 0'
 
145
},{
 
146
    title: 'Navigation',
 
147
    region:'west',
 
148
    margins: '5 0 0 0',
 
149
    cmargins: '5 5 0 0',
 
150
    width: 175,
 
151
    minSize: 100,
 
152
    maxSize: 250
 
153
},{
 
154
    title: 'Main Content',
 
155
    collapsible: false,
 
156
    region:'center',
 
157
    margins: '5 0 0 0'
 
158
}]
 
159
            </code></pre>
 
160
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout" target="_blank">API Reference</a></p>
 
161
        </div>
 
162
        <div id="card-tabs-details">
 
163
            <h2>Ext.layout.CardLayout (TabPanel)</h2>
 
164
            <p>The TabPanel component is an excellent example of a sophisticated card layout.  Each tab is just
 
165
            a panel managed by the card layout such that only one is visible at a time.  In this case, configuration
 
166
            is simple since we aren't actually building a card layout from scratch.  Don't forget to set the
 
167
            activeItem config in order to default to the tab that should display first.</p>
 
168
            <p><b>Sample Config:</b></p>
 
169
            <pre><code>
 
170
xtype: 'tabpanel',
 
171
activeItem: 0, // index or id
 
172
items:[{
 
173
    title: 'Tab 1',
 
174
    html: 'This is tab 1 content.'
 
175
},{
 
176
    title: 'Tab 2',
 
177
    html: 'This is tab 2 content.'
 
178
},{
 
179
    title: 'Tab 3',
 
180
    html: 'This is tab 3 content.'
 
181
}]
 
182
            </code></pre>
 
183
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">CardLayout API Reference</a></p>
 
184
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel" target="_blank">TabPanel API Reference</a></p>
 
185
        </div>
 
186
        <div id="card-wizard-details">
 
187
            <h2>Ext.layout.CardLayout (Wizard)</h2>
 
188
            <p>You can use a CardLayout to create your own custom wizard-style screen.  The layout is a standard
 
189
            CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function
 
190
            that implements the wizard's business logic (see the code in basic.js for details).</p>
 
191
            <p><b>Sample Config:</b></p>
 
192
            <pre><code>
 
193
layout:'card',
 
194
activeItem: 0, // index or id
 
195
bbar: ['->', {
 
196
    id: 'card-prev',
 
197
    text: '&amp;laquo; Previous'
 
198
},{
 
199
    id: 'card-next',
 
200
    text: 'Next &amp;raquo;'
 
201
}],
 
202
items: [{
 
203
    id: 'card-0',
 
204
    html: 'Step 1'
 
205
},{
 
206
    id: 'card-1',
 
207
    html: 'Step 2'
 
208
},{
 
209
    id: 'card-2',
 
210
    html: 'Step 3'
 
211
}]
 
212
            </code></pre>
 
213
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">API Reference</a></p>
 
214
        </div>
 
215
        <div id="column-details">
 
216
            <h2>Ext.layout.ColumnLayout</h2>
 
217
            <p>This is a useful layout style when you need multiple columns that can have varying content height.
 
218
            Any fixed-width column widths are calculated first, then any percentage-width columns specified using
 
219
            the <tt>columnWidth</tt> config will be calculated based on remaining container width.  Percentages
 
220
            should add up to 1 (100%) in order to fill the container.</p>
 
221
            <p><b>Sample Config:</b></p>
 
222
            <pre><code>
 
223
layout:'column',
 
224
items: [{
 
225
    title: 'Width = 25%',
 
226
    columnWidth: .25,
 
227
    html: 'Content'
 
228
},{
 
229
    title: 'Width = 75%',
 
230
    columnWidth: .75,
 
231
    html: 'Content'
 
232
},{
 
233
    title: 'Width = 250px',
 
234
    width: 250,
 
235
    html: 'Content'
 
236
}]
 
237
            </code></pre>
 
238
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout" target="_blank">API Reference</a></p>
 
239
        </div>
 
240
        <div id="fit-details">
 
241
            <h2>Ext.layout.FitLayout</h2>
 
242
            <p>A very simple layout that simply fills the container with a single panel.  This is usually the best default
 
243
            layout choice when you have no other specific layout requirements.</p>
 
244
            <p><b>Sample Config:</b></p>
 
245
            <pre><code>
 
246
layout:'fit',
 
247
items: {
 
248
    title: 'Fit Panel',
 
249
    html: 'Content',
 
250
    border: false
 
251
}
 
252
            </code></pre>
 
253
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FitLayout" target="_blank">API Reference</a></p>
 
254
        </div>
 
255
        <div id="form-details">
 
256
            <h2>Ext.layout.FormLayout</h2>
 
257
            <p>FormLayout has specific logic to deal with form fields, labels, etc.  While you can use a FormLayout in
 
258
            a standard panel, you will normally want to use a FormPanel directly in order to get form-specific functionality
 
259
            like validation, submission, etc.  FormPanels use a FormLayout internally so the layout config is not needed
 
260
            (and the layout may not render correctly if overridden).</p>
 
261
            <p><b>Sample Config:</b></p>
 
262
            <pre><code>
 
263
xtype: 'form', // FormPanel
 
264
labelWidth: 75,
 
265
width: 350,
 
266
defaultType: 'textfield',
 
267
items: [{
 
268
        fieldLabel: 'First Name',
 
269
        name: 'first',
 
270
        allowBlank:false
 
271
    },{
 
272
        fieldLabel: 'Last Name',
 
273
        name: 'last'
 
274
    },{
 
275
        fieldLabel: 'Company',
 
276
        name: 'company'
 
277
    },{
 
278
        fieldLabel: 'Email',
 
279
        name: 'email',
 
280
        vtype:'email'
 
281
    }
 
282
],
 
283
buttons: [
 
284
    {text: 'Save'},
 
285
    {text: 'Cancel'}
 
286
]
 
287
            </code></pre>
 
288
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FormLayout" target="_blank">API Reference</a></p>
 
289
        </div>
 
290
        <div id="table-details">
 
291
            <h2>Ext.layout.TableLayout</h2>
 
292
            <p>Outputs a standard HTML table as the layout container.  This is sometimes useful for complex layouts
 
293
            where cell spanning is required, or when you want to allow the contents to flow naturally based on standard
 
294
            browser table layout rules.</p>
 
295
            <p><b>Sample Config:</b></p>
 
296
            <pre><code>
 
297
layout:'table',
 
298
layoutConfig: {
 
299
    columns: 3
 
300
},
 
301
items: [
 
302
    {html:'1,1',rowspan:3},
 
303
    {html:'1,2'},
 
304
    {html:'1,3'},
 
305
    {html:'2,2',colspan:2},
 
306
    {html:'3,2'},
 
307
    {html:'3,3'}
 
308
]
 
309
            </code></pre>
 
310
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout" target="_blank">API Reference</a></p>
 
311
        </div>
 
312
 
 
313
        <div id="vbox-details">
 
314
            <h2>Ext.layout.VBoxLayout</h2>
 
315
            <p>A layout that allows for the vertical and horizontal stretching of child items, much like the container
 
316
            layout with size management.</p>
 
317
            <p><b>Sample Config:</b></p>
 
318
            <pre><code>
 
319
layout:'vbox',
 
320
layoutConfig: {
 
321
    align : 'stretch',
 
322
    pack  : 'start',
 
323
},
 
324
items: [
 
325
    {html:'panel 1', flex:1},
 
326
    {html:'panel 2', height:150},
 
327
    {html:'panel 3', flex:2'}
 
328
]
 
329
            </code></pre>
 
330
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout" target="_blank">API Reference</a></p>
 
331
        </div>
 
332
 
 
333
        <div id="hbox-details">
 
334
            <h2>Ext.layout.HBoxLayout</h2>
 
335
            <p>A layout that allows for the vertical and horizontal stretching of child items, much like the column
 
336
            layout but can stretch items vertically.</p>
 
337
            <p><b>Sample Config:</b></p>
 
338
            <pre><code>
 
339
layout:'hbox',
 
340
layoutConfig: {
 
341
    align : 'stretch',
 
342
    pack  : 'start',
 
343
},
 
344
items: [
 
345
    {html:'panel 1', flex:1},
 
346
    {html:'panel 2', width:150},
 
347
    {html:'panel 3', flex:2'}
 
348
]
 
349
            </code></pre>
 
350
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.HBoxLayout" target="_blank">API Reference</a></p>
 
351
        </div>
 
352
 
 
353
 
 
354
        <!-- Custom layouts -->
 
355
        <div id="row-details">
 
356
            <h2>Ext.ux.layout.RowLayout</h2>
 
357
            <p>This is a custom layout that is useful when you need a layout style with multiple rows of content.
 
358
            Any fixed-height rows are calculated first, then any percentage-height rows specified using the
 
359
            <tt>rowHeight</tt> config will be calculated based on remaining container height.  Percentages
 
360
            should add up to 1 (100%) in order to fill the container. Standard panel widths (fixed or
 
361
            percentage) are also supported.</p>
 
362
            <p><b>Sample Config:</b></p>
 
363
            <pre><code>
 
364
layout:'ux.row',
 
365
items: [{
 
366
    title: 'Height = 25%',
 
367
    rowHeight: .25,
 
368
    width: '50%'
 
369
},{
 
370
    title: 'Height = 100px',
 
371
    height: 100,
 
372
    width: 300
 
373
},{
 
374
    title: 'Height = 75%',
 
375
    rowHeight: .75
 
376
}]
 
377
            </code></pre>
 
378
        </div>
 
379
        <div id="center-details">
 
380
            <h2>Ext.ux.layout.CenterLayout</h2>
 
381
            <p>This is a custom layout for centering contents within a container.  The only requirement is
 
382
            that the container have a single child panel with a width specified (fixed or percentage).
 
383
            The child panel can then contain  any content, including other components, that will display
 
384
            centered within the main container. To make the centered panel non-visual, remove the title
 
385
            and add <tt>border:false</tt> to the child config.</p>
 
386
            <p><b>Sample Config:</b></p>
 
387
            <pre><code>
 
388
layout:'ux.center',
 
389
items: {
 
390
    title: 'Centered Panel',
 
391
    width: '75%',
 
392
    html: 'Some content'
 
393
}
 
394
            </code></pre>
 
395
        </div>
 
396
 
 
397
 
 
398
        <!-- Combination layouts -->
 
399
        <div id="tabs-nested-layouts-details">
 
400
            <h2>Tabs With Nested Layouts</h2>
 
401
            <p>There are multiple levels of layout nesting within three different TabPanels in this example.
 
402
            Each tab in a TabPanel can have its own separate layout.  As we can see, some have plain content,
 
403
            while others contain full BorderLayouts.  There is also a fully-loaded grid nested down inside
 
404
            the inner-most tab, showing that there is no limit to how complex your layout can be.</p>
 
405
            <p>One of the trickiest aspects of deeply nested layouts is dealing with borders on all the
 
406
            different panels used in the layout.  In this example, body padding and region margins are used
 
407
            extensively to provide space between components so that borders can be displayed naturally in
 
408
            most cases. A different approach would be to minimize padding and use the config properties
 
409
            related to borders to turn borders on and off selectively to achieve a slightly different look
 
410
            and feel.</p>
 
411
        </div>
 
412
        <div id="complex-details">
 
413
            <h2>Complex Layout</h2>
 
414
            <p></p>
 
415
        </div>
 
416
 
 
417
        <!-- Form layouts -->
 
418
        <div id="abs-form-details">
 
419
            <h2>Absolute Layout Form</h2>
 
420
            <p>FormLayout supports absolute positioning in addition to standard anchoring for flexible control over
 
421
            positioning of fields and labels in containers.  In this example, the top and left positions of the labels
 
422
            and fields are positioned absolute, while the field widths are anchored to the right and/or bottom of the container.</p>
 
423
        </div>
 
424
    </div>
 
425
</body>
 
426
</html>