[619] | 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 | |
---|
| 10 | Ext.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 | }); |
---|