source: trunk/web/addons/job_monarch/lib/extjs-30/examples/layout-browser/layouts/basic.js @ 625

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

lib/extjs-30:

  • new ExtJS 3.0
File size: 10.4 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7//
8// Note that these are all defined as panel configs, rather than instantiated
9// as panel objects.  You could just as easily do this instead:
10//
11// var absolute = new Ext.Panel({ ... });
12//
13// However, by passing configs into the main container instead of objects, we can defer
14// layout AND object instantiation until absolutely needed.  Since most of these panels
15// won't be shown by default until requested, this will save us some processing
16// time up front when initially rendering the page.
17//
18// Since all of these configs are being added into a layout container, they are
19// automatically assumed to be panel configs, and so the xtype of 'panel' is
20// implicit.  To define a config of some other type of component to be added into
21// the layout, simply provide the appropriate xtype config explicitly.
22//
23/*
24 * ================  Start page config  =======================
25 */
26// The default start page, also a simple example of a FitLayout.
27var start = {
28        id: 'start-panel',
29        title: 'Start Page',
30        layout: 'fit',
31        bodyStyle: 'padding:25px',
32        contentEl: 'start-div'  // pull existing content from the page
33};
34
35/*
36 * ================  AbsoluteLayout config  =======================
37 */
38var absolute = {
39        id: 'absolute-panel',
40        title: 'Absolute Layout',
41        layout: 'absolute',
42        defaults: {
43                bodyStyle: 'padding:15px;',
44                width: 200,
45                height: 100,
46                frame: true
47        },
48        items:[{
49                title: 'Panel 1',
50                x: 50,
51                y: 50,
52                html: 'Positioned at x:50, y:50'
53        },{
54                title: 'Panel 2',
55                x: 125,
56                y: 125,
57                html: 'Positioned at x:125, y:125'
58        }]
59};
60
61/*
62 * ================  AccordionLayout config  =======================
63 */
64var accordion = {
65    id: 'accordion-panel',
66        title: 'Accordion Layout',
67    layout: 'accordion',
68    bodyBorder: false,  // useful for accordion containers since the inner panels have borders already
69    bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout
70        defaults: {bodyStyle: 'padding:15px'},
71    items: [{
72        title: 'Introduction',
73                tools: [{id:'gear'},{id:'refresh'}],
74                html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
75    },{
76        title: 'Basic Content',
77                html: '<br /><p>More content.  Open the third panel for a customized look and feel example.</p>',
78                items: {
79                        xtype: 'button',
80                        text: 'Show Next Panel',
81                        handler: function(){
82                                Ext.getCmp('acc-custom').expand(true);
83                        }
84                }
85    },{
86                id: 'acc-custom',
87        title: 'Custom Panel Look and Feel',
88                cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
89                html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
90    }]
91};
92
93/*
94 * ================  AnchorLayout config  =======================
95 */
96var anchor = {
97        id:'anchor-panel',
98        title: 'Anchor Layout',
99    layout:'anchor',
100        defaults: {bodyStyle: 'padding:15px'},
101    items: [{
102        title: 'Panel 1',
103        height: 100,
104                anchor: '50%',
105                html: '<p>Width = 50% of the container</p>'
106    },{
107        title: 'Panel 2',
108        height: 100,
109                anchor: '-100',
110                html: '<p>Width = container width - 100 pixels</p>'
111    },{
112        title: 'Panel 3',
113                anchor: '-10, -262',
114                html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
115    }]
116};
117
118/*
119 * ================  BorderLayout config  =======================
120 */
121var border = {
122        id:'border-panel',
123        title: 'Border Layout',
124    layout: 'border',
125    bodyBorder: false,
126        defaults: {
127                collapsible: true,
128        split: true,
129                animFloat: false,
130                autoHide: false,
131                useSplitTips: true,
132                bodyStyle: 'padding:15px'
133        },
134    items: [{
135        title: 'Footer',
136                region: 'south',
137        height: 150,
138        minSize: 75,
139        maxSize: 250,
140                cmargins: '5 0 0 0',
141                html: '<p>Footer content</p>'
142    },{
143                title: 'Navigation',
144        region:'west',
145                floatable: false,
146                margins: '5 0 0 0',
147                cmargins: '5 5 0 0',
148        width: 175,
149        minSize: 100,
150        maxSize: 250,
151                html: '<p>Secondary content like navigation links could go here</p>'
152        },{
153                title: 'Main Content',
154                collapsible: false,
155        region: 'center',
156                margins: '5 0 0 0',
157                html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
158        }]
159};
160
161/*
162 * ================  CardLayout config (TabPanel)  =======================
163 */
164// Note that the TabPanel component uses an internal CardLayout -- it is not
165// something you have to explicitly configure.  However, it is still a perfect
166// example of how this layout style can be used in a complex component.
167var cardTabs = {
168        xtype: 'tabpanel',
169        id: 'card-tabs-panel',
170        plain: true,  //remove the header border
171        activeItem: 0,
172        defaults: {bodyStyle: 'padding:15px'},
173        items:[{
174                title: 'Tab 1',
175                html: 'This is tab 1 content.'
176        },{
177                title: 'Tab 2',
178                html: 'This is tab 2 content.'
179        },{
180                title: 'Tab 3',
181                html: 'This is tab 3 content.'
182        }]
183};
184
185// This is a fake CardLayout navigation function.  A real implementation would
186// likely be more sophisticated, with logic to validate navigation flow.  It will
187// be assigned next as the handling function for the buttons in the CardLayout example.
188var cardNav = function(incr){
189        var l = Ext.getCmp('card-wizard-panel').getLayout();
190        var i = l.activeItem.id.split('card-')[1];
191        var next = parseInt(i) + incr;
192        l.setActiveItem(next);
193        Ext.getCmp('card-prev').setDisabled(next==0);
194        Ext.getCmp('card-next').setDisabled(next==2);
195};
196
197/*
198 * ================  CardLayout config (Wizard)  =======================
199 */
200var cardWizard = {
201        id:'card-wizard-panel',
202        title: 'Card Layout (Wizard)',
203    layout:'card',
204        activeItem: 0,
205        bodyStyle: 'padding:15px',
206        defaults: {border:false},
207        bbar: ['->', {
208                id: 'card-prev',
209                text: '&laquo; Previous',
210                handler: cardNav.createDelegate(this, [-1]),
211                disabled: true
212        },{
213                id: 'card-next',
214                text: 'Next &raquo;',
215                handler: cardNav.createDelegate(this, [1])
216        }],
217        items: [{
218                id: 'card-0',
219                html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
220    },{
221                id: 'card-1',
222                html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'
223    },{
224                id: 'card-2',
225                html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
226    }]
227};
228
229/*
230 * ================  ColumnLayout config  =======================
231 */
232var column = {
233        id:'column-panel',
234        title: 'Column Layout',
235    layout: 'column',
236    bodyStyle: 'padding:5px',
237        defaults: {bodyStyle:'padding:15px'},
238    items: [{
239        title: 'Width = 0.25',
240                columnWidth: 0.25,
241                html: '<p>This is some short content.</p>'
242    },{
243        title: 'Width = 0.75',
244                columnWidth: 0.75,
245                html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
246    },{
247        title: 'Width = 250px',
248                width: 250,
249                html: 'Not much here!'
250        }]
251};
252
253/*
254 * ================  FitLayout config  =======================
255 */
256var fit = {
257        id: 'fit-panel',
258        title: 'Fit Layout',
259    layout: 'fit',
260    items: {
261                title: 'Inner Panel',
262                html: '<p>This panel is fit within its container.</p>',
263                bodyStyle: 'margin:15px',
264                border: false
265    }
266};
267
268/*
269 * ================  FormLayout config  =======================
270 */
271// NOTE: While you can create a basic Panel with layout:'form', practically
272// you should usually use a FormPanel to also get its form-specific functionality.
273// Note that the layout config is not required on FormPanels.
274var form = {
275        xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
276        id: 'form-panel',
277    labelWidth: 75,
278    title: 'Form Layout',
279    bodyStyle: 'padding:15px',
280    width: 350,
281        labelPad: 20,
282        layoutConfig: {
283                labelSeparator: ''
284        },
285    defaults: {
286                width: 230,
287                msgTarget: 'side'
288        },
289    defaultType: 'textfield',
290    items: [{
291            fieldLabel: 'First Name',
292            name: 'first',
293            allowBlank:false
294        },{
295            fieldLabel: 'Last Name',
296            name: 'last'
297        },{
298            fieldLabel: 'Company',
299            name: 'company'
300        },{
301            fieldLabel: 'Email',
302            name: 'email',
303            vtype:'email'
304        }
305    ],
306    buttons: [{text: 'Save'},{text: 'Cancel'}]
307};
308
309/*
310 * ================  TableLayout config  =======================
311 */
312var table = {
313        id: 'table-panel',
314        title: 'Table Layout',
315    layout: 'table',
316        layoutConfig: {
317                columns: 4
318        },
319        defaults: {
320                bodyStyle:'padding:15px 20px'
321        },
322    items: [{
323        title: 'Lots of Spanning',
324                html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
325                rowspan: 3
326    },{
327        title: 'Basic Table Cell',
328                html: '<p>Basic panel in a table cell.</p>',
329                cellId: 'basic-cell',
330                cellCls: 'custom-cls'
331    },{
332                html: '<p>Plain panel</p>'
333        },{
334        title: 'Another Cell',
335                html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',
336                width: 300,
337                rowspan: 2
338    },{
339                html: 'Plain cell spanning two columns',
340                colspan: 2
341    },{
342                title: 'More Column Spanning',
343                html: '<p>Spanning three columns.</p>',
344                colspan: 3
345        },{
346                title: 'Spanning All Columns',
347                html: '<p>Spanning all columns.</p>',
348                colspan: 4
349        }]
350};
351
352
353/*
354 * ================  VBoxLayout config  =======================
355 */
356var vbox = {
357    id: 'vbox-panel',
358    title: 'vBox Layout',
359    layout: {
360        type: 'vbox',
361        pack: 'start',
362        align: 'stretch'
363    },
364    defaults: {
365        frame: true
366    },
367    items: [{
368        title: 'Panel 1',
369        flex: 1,
370        html: 'flex : 1'
371    }, {
372        title: 'Panel 2',
373        height: 100,
374        html: 'height: 100'
375    }, {
376        title: 'Panel 3',
377        flex: 2,
378        html: 'flex : 2'
379    }]
380};
381
382/*
383 * ================  HBoxLayout config  =======================
384 */
385var hbox = {
386    id: 'hbox-panel',
387    title: 'hBox Layout',
388    layout: {
389        type: 'hbox',
390        pack: 'start',
391        align: 'stretch'
392    },
393    defaults: {
394        frame: true
395    },
396    items: [{
397        title: 'Panel 1',
398        flex: 1,
399        html: 'flex : 1'
400    }, {
401        title: 'Panel 2',
402        width: 100,
403        html: 'width : 100'
404    }, {
405        title: 'Panel 3',
406        flex: 2,
407        html: 'flex : 2'
408    }]
409};
Note: See TracBrowser for help on using the repository browser.