source: trunk/web/addons/job_monarch/lib/extjs/examples/layout-browser/layout-browser.html @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

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