source: trunk/web/addons/job_monarch/lib/extjs/examples/form/check-radio.js @ 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.5 KB
Line 
1/*
2 * Ext JS Library 2.2.1
3 * Copyright(c) 2006-2009, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8
9
10Ext.onReady(function(){
11
12    Ext.QuickTips.init();
13   
14    // turn on validation errors beside the field globally
15    Ext.form.Field.prototype.msgTarget = 'side';
16
17    var fp = new Ext.FormPanel({
18        frame: true,
19        title:'Check/Radio Groups',
20        labelWidth: 110,
21        width: 600,
22        renderTo:'form-ct',
23        bodyStyle: 'padding:0 10px 0;',
24       
25        items: [{
26            layout: 'column',
27            border: false,
28            defaults: {
29                columnWidth: '.5',
30                border: false
31            },
32           
33            /*====================================================================
34             * Individual checkbox/radio examples
35             *====================================================================*/
36           
37            // Using checkbox/radio groups will generally be easier and more flexible than
38            // using individual checkbox and radio controls, but this shows that you can
39            // certainly do so if you only need a single control, or if you want to control 
40            // exactly where each check/radio goes within your layout.
41           
42            items: [{
43                bodyStyle: 'padding-right:5px;',
44                items:         {
45                    xtype:'fieldset',
46                    title: 'Individual Checkboxes',
47                    autoHeight: true,
48                    defaultType: 'checkbox',  // each item will be a checkbox
49                    items: [{
50                        xtype: 'textfield',
51                        name: 'txt-test1',
52                        fieldLabel: 'Alignment Test'
53                    },{
54                        fieldLabel: 'Favorite Animals',
55                        boxLabel: 'Dog',
56                        name: 'fav-animal-dog'
57                    },{
58                        fieldLabel: '',
59                        labelSeparator: '',
60                        boxLabel: 'Cat',
61                        name: 'fav-animal-cat'
62                    },{
63                        checked: true,
64                        fieldLabel: '',
65                        labelSeparator: '',
66                        boxLabel: 'Monkey',
67                        name: 'fav-animal-monkey'
68                    }]
69                }
70            },{
71                bodyStyle: 'padding-left:5px;',
72                items: {
73                    xtype:'fieldset',
74                    title: 'Individual Radios',
75                    autoHeight: true,
76                    defaultType: 'radio',  // each item will be a radio button
77                    items: [{
78                        xtype: 'textfield',
79                        name: 'txt-test2',
80                        fieldLabel: 'Alignment Test'
81                    },{
82                        checked: true,
83                        fieldLabel: 'Favorite Color',
84                        boxLabel: 'Red',
85                        name: 'fav-color',
86                        inputValue: 'red'
87                    },{
88                        fieldLabel: '',
89                        labelSeparator: '',
90                        boxLabel: 'Blue',
91                        name: 'fav-color',
92                        inputValue: 'blue'
93                    },{
94                        fieldLabel: '',
95                        labelSeparator: '',
96                        boxLabel: 'Green',
97                        name: 'fav-color',
98                        inputValue: 'green'
99                    }]
100                }
101            }]
102        },{
103           
104            /*====================================================================
105             * CheckGroup examples
106             *====================================================================*/
107           
108            xtype:'fieldset',
109            title: 'Checkbox Groups',
110            autoHeight: true,
111            layout: 'form',
112            items: [{
113                xtype: 'textfield',
114                name: 'txt-test3',
115                fieldLabel: 'Alignment Test',
116                anchor: '95%'
117            },{
118                // Use the default, automatic layout to distribute the controls evenly
119                // across a single row
120                xtype: 'checkboxgroup',
121                fieldLabel: 'Auto Layout',
122                items: [
123                    {boxLabel: 'Item 1', name: 'cb-auto-1'},
124                    {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
125                    {boxLabel: 'Item 3', name: 'cb-auto-3'},
126                    {boxLabel: 'Item 4', name: 'cb-auto-4'},
127                    {boxLabel: 'Item 5', name: 'cb-auto-5'}
128                ]
129            },{
130                xtype: 'checkboxgroup',
131                fieldLabel: 'Single Column',
132                itemCls: 'x-check-group-alt',
133                // Put all controls in a single column with width 100%
134                columns: 1,
135                items: [
136                    {boxLabel: 'Item 1', name: 'cb-col-1'},
137                    {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
138                    {boxLabel: 'Item 3', name: 'cb-col-3'}
139                ]
140            },{
141                xtype: 'checkboxgroup',
142                fieldLabel: 'Multi-Column (horizontal)',
143                // Distribute controls across 3 even columns, filling each row
144                // from left to right before starting the next row
145                columns: 3,
146                items: [
147                    {boxLabel: 'Item 1', name: 'cb-horiz-1'},
148                    {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
149                    {boxLabel: 'Item 3', name: 'cb-horiz-3'},
150                    {boxLabel: 'Item 4', name: 'cb-horiz-4'},
151                    {boxLabel: 'Item 5', name: 'cb-horiz-5'}
152                ]
153            },{
154                xtype: 'checkboxgroup',
155                fieldLabel: 'Multi-Column (vertical)',
156                itemCls: 'x-check-group-alt',
157                // Distribute controls across 3 even columns, filling each column
158                // from top to bottom before starting the next column
159                columns: 3,
160                vertical: true,
161                items: [
162                    {boxLabel: 'Item 1', name: 'cb-vert-1'},
163                    {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
164                    {boxLabel: 'Item 3', name: 'cb-vert-3'},
165                    {boxLabel: 'Item 4', name: 'cb-vert-4'},
166                    {boxLabel: 'Item 5', name: 'cb-vert-5'}
167                ]
168            },{
169                xtype: 'checkboxgroup',
170                fieldLabel: 'Multi-Column<br />(custom widths)',
171                // Specify exact column widths (could also include float values for %)
172                columns: [100, 100],
173                vertical: true,
174                items: [
175                    {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
176                    {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
177                    {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
178                    {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
179                    {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
180                ]
181            },{
182                xtype: 'checkboxgroup',
183                itemCls: 'x-check-group-alt',
184                fieldLabel: 'Custom Layout<br />(w/ validation)',
185                allowBlank: false,
186                anchor: '95%',
187                items: [{
188                    // You can pass sub-item arrays along with width/columnWidth configs
189                    // ColumnLayout-style for complete layout control.  In this example we
190                    // only want one item in the middle column, which would not be possible
191                    // using the columns config.  We also want to make sure that our headings
192                    // end up at the top of each column as expected.
193                    columnWidth: '.25',
194                    items: [
195                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
196                        {boxLabel: 'Item 1', name: 'cb-cust-1'},
197                        {boxLabel: 'Item 2', name: 'cb-cust-2'}
198                    ]
199                },{
200                    columnWidth: '.5',
201                    items: [
202                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
203                        {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
204                    ]
205                },{
206                    columnWidth: '.25',
207                    items: [
208                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
209                        {boxLabel: 'Item 4', name: 'cb-cust-4'},
210                        {boxLabel: 'Item 5', name: 'cb-cust-5'}
211                    ]
212                }]
213            }]
214        },{
215           
216            /*====================================================================
217             * RadioGroup examples
218             *====================================================================*/
219            // NOTE: These radio examples use the exact same options as the checkbox ones
220            // above, so the comments will not be repeated.  Please see comments above for
221            // additional explanation on some config options.
222           
223            xtype:'fieldset',
224            title: 'Radio Groups',
225            autoHeight: true,
226            items: [{
227                xtype: 'textfield',
228                name: 'txt-test4',
229                fieldLabel: 'Alignment Test',
230                anchor: '95%'
231            },{
232                xtype: 'radiogroup',
233                fieldLabel: 'Auto Layout',
234                items: [
235                    {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
236                    {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
237                    {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
238                    {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
239                    {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
240                ]
241            },{
242                xtype: 'radiogroup',
243                fieldLabel: 'Single Column',
244                itemCls: 'x-check-group-alt',
245                columns: 1,
246                items: [
247                    {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
248                    {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
249                    {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
250                ]
251            },{
252                xtype: 'radiogroup',
253                fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
254                columns: 3,
255                items: [
256                    {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
257                    {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
258                    {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
259                    {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
260                    {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
261                ]
262            },{
263                xtype: 'radiogroup',
264                fieldLabel: 'Multi-Column<br />(vert. auto-width)',
265                itemCls: 'x-check-group-alt',
266                columns: 3,
267                vertical: true,
268                items: [
269                    {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
270                    {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
271                    {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
272                    {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
273                    {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
274                ]
275            },{
276                xtype: 'radiogroup',
277                fieldLabel: 'Multi-Column<br />(custom widths)',
278                columns: [100, 100],
279                vertical: true,
280                items: [
281                    {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
282                    {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
283                    {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
284                    {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
285                    {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
286                ]
287            },{
288                xtype: 'radiogroup',
289                itemCls: 'x-check-group-alt',
290                fieldLabel: 'Custom Layout<br />(w/ validation)',
291                allowBlank: false,
292                anchor: '95%',
293                items: [{
294                    columnWidth: '.25',
295                    items: [
296                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
297                        {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
298                        {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
299                    ]
300                },{
301                    columnWidth: '.5',
302                    items: [
303                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
304                        {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
305                    ]
306                },{
307                    columnWidth: '.25',
308                    items: [
309                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
310                        {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
311                        {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
312                    ]
313                }]
314            }]
315        }],
316       
317        buttons: [{
318            text: 'Save',
319            handler: function(){
320               if(fp.getForm().isValid()){
321                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
322                        fp.getForm().getValues(true).replace(/&/g,', '));
323                }
324            }
325        },{
326            text: 'Reset',
327            handler: function(){
328                fp.getForm().reset();
329            }
330        }]
331    });
332});
Note: See TracBrowser for help on using the repository browser.