3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
7 Ext.onReady(function(){
11 // turn on validation errors beside the field globally
12 Ext.form.Field.prototype.msgTarget = 'side';
15 /*====================================================================
16 * Individual checkbox/radio examples
17 *====================================================================*/
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.
24 bodyStyle: 'padding-right:5px;',
27 title: 'Individual Checkboxes',
29 defaultType: 'checkbox', // each item will be a checkbox
33 fieldLabel: 'Alignment Test'
35 fieldLabel: 'Favorite Animals',
37 name: 'fav-animal-dog'
42 name: 'fav-animal-cat'
48 name: 'fav-animal-monkey'
52 bodyStyle: 'padding-left:5px;',
55 title: 'Individual Radios',
57 defaultType: 'radio', // each item will be a radio button
61 fieldLabel: 'Alignment Test'
64 fieldLabel: 'Favorite Color',
84 /*====================================================================
86 *====================================================================*/
89 title: 'Checkbox Groups (initially collapsed)',
92 collapsed: true, // initially collapse the group
97 fieldLabel: 'Alignment Test',
100 // Use the default, automatic layout to distribute the controls evenly
101 // across a single row
102 xtype: 'checkboxgroup',
103 fieldLabel: 'Auto Layout',
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'}
112 xtype: 'checkboxgroup',
113 fieldLabel: 'Single Column',
114 itemCls: 'x-check-group-alt',
115 // Put all controls in a single column with width 100%
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'}
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
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'}
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
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'}
151 xtype: 'checkboxgroup',
152 fieldLabel: 'Multi-Column<br />(custom widths)',
153 // Specify exact column widths (could also include float values for %)
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}
164 xtype: 'checkboxgroup',
165 itemCls: 'x-check-group-alt',
166 fieldLabel: 'Custom Layout<br />(w/ validation)',
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.
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'}
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'}
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'}
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.
208 title: 'Radio Groups',
213 fieldLabel: 'Alignment Test',
217 fieldLabel: 'Auto Layout',
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}
227 fieldLabel: 'Single Column',
228 itemCls: 'x-check-group-alt',
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}
237 fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
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}
248 fieldLabel: 'Multi-Column<br />(vert. auto-width)',
249 itemCls: 'x-check-group-alt',
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}
261 fieldLabel: 'Multi-Column<br />(custom widths)',
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}
273 itemCls: 'x-check-group-alt',
274 fieldLabel: 'Custom Layout<br />(w/ validation)',
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}
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}
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}
301 // combine all that into one huge form
302 var fp = new Ext.FormPanel({
303 title: 'Check/Radio Groups Example',
308 bodyStyle: 'padding:0 10px 0;',
313 // defaults are applied to all child items unless otherwise specified by child item
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,', '));
334 fp.getForm().reset();