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> |
---|
38 | layout: 'absolute', |
---|
39 | items:[{ |
---|
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 — all panels added to the container will be converted to accordion panels.</p> |
---|
52 | <p><b>Sample Config:</b></p> |
---|
53 | <pre><code> |
---|
54 | layout: 'accordion', |
---|
55 | items:[{ |
---|
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> |
---|
87 | layout: 'anchor', |
---|
88 | items: [{ |
---|
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> |
---|
111 | layout:'border', |
---|
112 | defaults: { |
---|
113 | collapsible: true, |
---|
114 | split: true, |
---|
115 | bodyStyle: 'padding:15px' |
---|
116 | }, |
---|
117 | items: [{ |
---|
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> |
---|
149 | xtype: 'tabpanel', |
---|
150 | activeItem: 0, // index or id |
---|
151 | items:[{ |
---|
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> |
---|
172 | layout:'card', |
---|
173 | activeItem: 0, // index or id |
---|
174 | bbar: ['->', { |
---|
175 | id: 'card-prev', |
---|
176 | text: '&laquo; Previous' |
---|
177 | },{ |
---|
178 | id: 'card-next', |
---|
179 | text: 'Next &raquo;' |
---|
180 | }], |
---|
181 | items: [{ |
---|
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> |
---|
202 | layout:'column', |
---|
203 | items: [{ |
---|
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> |
---|
225 | layout:'fit', |
---|
226 | items: { |
---|
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> |
---|
242 | xtype: 'form', // FormPanel |
---|
243 | labelWidth: 75, |
---|
244 | width: 350, |
---|
245 | defaultType: 'textfield', |
---|
246 | items: [{ |
---|
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 | ], |
---|
262 | buttons: [ |
---|
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> |
---|
276 | layout:'table', |
---|
277 | layoutConfig: { |
---|
278 | columns: 3 |
---|
279 | }, |
---|
280 | items: [ |
---|
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> |
---|
301 | layout:'ux.row', |
---|
302 | items: [{ |
---|
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> |
---|
324 | layout:'ux.center', |
---|
325 | items: { |
---|
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> |
---|