examples/form/check-radio.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.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 });