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