← Back to branch summary

~crf-team/crf-irp/crf-irp

« back to all changes in this revision

Viewing changes to WebContent/js/extjs-2/examples/layout-browser/layouts/basic.js

  • Committer: Thomas
  • Date: 2010-03-10 23:55:46 UTC
  • Revision ID: thomas@daisybox-port-20100310235546-23635dk6x5asb1ca
Upgrade ExtJs 3.1.1
Upgrade Spring 3.0.1 + dependencies
Change Jawr JS post processor : YUI
Upgrade to last build of dwr 3 trunk 69 revision 3019(after build 116), upgrade jawr-dwr plugin 1.4 unofficiale from jose noheda, Jawr 3.2.1

Show diffs side-by-side

added added

removed removed

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