examples/form/check-radio.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.form.*',
  17     'Ext.layout.container.Column',
  18     'Ext.window.MessageBox',
  19     'Ext.fx.target.Element'
  20 ]);
  21
  22 Ext.onReady(function(){
  23
  24
  25     /*====================================================================
  26      * Individual checkbox/radio examples
  27      *====================================================================*/
  28
  29     // Using checkbox/radio groups will generally be more convenient and flexible than
  30     // using individual checkbox and radio controls, but this shows that you can
  31     // certainly do so if you only have a single control at a time.
  32     var individual = {
  33         xtype: 'container',
  34         layout: 'hbox',
  35         margin: '0 0 10',
  36         items: [{
  37             xtype: 'fieldset',
  38             flex: 1,
  39             title: 'Individual Checkboxes',
  40             defaultType: 'checkbox', // each item will be a checkbox
  41             layout: 'anchor',
  42             defaults: {
  43                 anchor: '100%',
  44                 hideEmptyLabel: false
  45             },
  46             items: [{
  47                 xtype: 'textfield',
  48                 name: 'txt-test1',
  49                 fieldLabel: 'Alignment Test'
  50             }, {
  51                 fieldLabel: 'Favorite Animals',
  52                 boxLabel: 'Dog',
  53                 name: 'fav-animal-dog',
  54                 inputValue: 'dog'
  55             }, {
  56                 boxLabel: 'Cat',
  57                 name: 'fav-animal-cat',
  58                 inputValue: 'cat'
  59             }, {
  60                 checked: true,
  61                 boxLabel: 'Monkey',
  62                 name: 'fav-animal-monkey',
  63                 inputValue: 'monkey'
  64             }]
  65         }, {
  66             xtype: 'component',
  67             width: 10
  68         }, {
  69             xtype: 'fieldset',
  70             flex: 1,
  71             title: 'Individual Radios',
  72             defaultType: 'radio', // each item will be a radio button
  73             layout: 'anchor',
  74             defaults: {
  75                 anchor: '100%',
  76                 hideEmptyLabel: false
  77             },
  78             items: [{
  79                 xtype: 'textfield',
  80                 name: 'txt-test2',
  81                 fieldLabel: 'Alignment Test'
  82             }, {
  83                 checked: true,
  84                 fieldLabel: 'Favorite Color',
  85                 boxLabel: 'Red',
  86                 name: 'fav-color',
  87                 inputValue: 'red'
  88             }, {
  89                 boxLabel: 'Blue',
  90                 name: 'fav-color',
  91                 inputValue: 'blue'
  92             }, {
  93                 boxLabel: 'Green',
  94                 name: 'fav-color',
  95                 inputValue: 'green'
  96             }]
  97         }]
  98     };
  99
 100
 101
 102
 103     /*====================================================================
 104      * CheckGroup example
 105      *====================================================================*/
 106     var checkGroup = {
 107         xtype: 'fieldset',
 108         title: 'Checkbox Groups (initially collapsed)',
 109         layout: 'anchor',
 110         defaults: {
 111             anchor: '100%',
 112             labelStyle: 'padding-left:4px;'
 113         },
 114         collapsible: true,
 115         collapsed: true,
 116         items: [{
 117             xtype: 'textfield',
 118             name: 'txt-test3',
 119             fieldLabel: 'Alignment Test'
 120         },{
 121             // Use the default, automatic layout to distribute the controls evenly
 122             // across a single row
 123             xtype: 'checkboxgroup',
 124             fieldLabel: 'Auto Layout',
 125             cls: 'x-check-group-alt',
 126             items: [
 127                 {boxLabel: 'Item 1', name: 'cb-auto-1'},
 128                 {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
 129                 {boxLabel: 'Item 3', name: 'cb-auto-3'},
 130                 {boxLabel: 'Item 4', name: 'cb-auto-4'},
 131                 {boxLabel: 'Item 5', name: 'cb-auto-5'}
 132             ]
 133         },{
 134             xtype: 'checkboxgroup',
 135             fieldLabel: 'Single Column',
 136             // Put all controls in a single column with width 100%
 137             columns: 1,
 138             items: [
 139                 {boxLabel: 'Item 1', name: 'cb-col-1'},
 140                 {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
 141                 {boxLabel: 'Item 3', name: 'cb-col-3'}
 142             ]
 143         },{
 144             xtype: 'checkboxgroup',
 145             fieldLabel: 'Multi-Column (horizontal)',
 146             cls: 'x-check-group-alt',
 147             // Distribute controls across 3 even columns, filling each row
 148             // from left to right before starting the next row
 149             columns: 3,
 150             items: [
 151                 {boxLabel: 'Item 1', name: 'cb-horiz-1'},
 152                 {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
 153                 {boxLabel: 'Item 3', name: 'cb-horiz-3'},
 154                 {boxLabel: 'Item 4', name: 'cb-horiz-4'},
 155                 {boxLabel: 'Item 5', name: 'cb-horiz-5'}
 156             ]
 157         },{
 158             xtype: 'checkboxgroup',
 159             fieldLabel: 'Multi-Column (vertical)',
 160             // Distribute controls across 3 even columns, filling each column
 161             // from top to bottom before starting the next column
 162             columns: 3,
 163             vertical: true,
 164             items: [
 165                 {boxLabel: 'Item 1', name: 'cb-vert-1'},
 166                 {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
 167                 {boxLabel: 'Item 3', name: 'cb-vert-3'},
 168                 {boxLabel: 'Item 4', name: 'cb-vert-4'},
 169                 {boxLabel: 'Item 5', name: 'cb-vert-5'}
 170             ]
 171         },{
 172             xtype: 'checkboxgroup',
 173             fieldLabel: 'Multi-Column<br />(custom widths)',
 174             cls: 'x-check-group-alt',
 175             // Specify exact column widths (could also include float values for %)
 176             columns: [100, 100],
 177             vertical: true,
 178             items: [
 179                 {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
 180                 {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
 181                 {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
 182                 {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
 183                 {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
 184             ]
 185         },{
 186             xtype: 'checkboxgroup',
 187             fieldLabel: 'Custom Layout<br />(w/ validation)',
 188             allowBlank: false,
 189             msgTarget: 'side',
 190             autoFitErrors: false,
 191             anchor: '-18',
 192             // You can change the 'layout' to anything you want, and include any nested
 193             // container structure, for complete layout control. In this example we only
 194             // want one item in the middle column, which would not be possible using the
 195             // default 'checkboxgroup' layout's columns config.  We also want to put
 196             // headings at the top of each column.
 197             layout: 'column',
 198             defaultType: 'container',
 199             items: [{
 200                 columnWidth: .25,
 201                 items: [
 202                     {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
 203                     {xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1'},
 204                     {xtype: 'checkboxfield', boxLabel: 'Item 2', name: 'cb-cust-2'}
 205                 ]
 206             },{
 207                 columnWidth: .5,
 208                 items: [
 209                     {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
 210                     {xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
 211                 ]
 212             },{
 213                 columnWidth: .25,
 214                 items: [
 215                     {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
 216                     {xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4'},
 217                     {xtype: 'checkboxfield', boxLabel: 'Item 5', name: 'cb-cust-5'}
 218                 ]
 219             }]
 220         }]
 221     };
 222
 223     /*====================================================================
 224      * RadioGroup examples
 225      *====================================================================*/
 226     // NOTE: These radio examples use the exact same options as the checkbox ones
 227     // above, so the comments will not be repeated.  Please see comments above for
 228     // additional explanation on some config options.
 229
 230     var radioGroup = {
 231         xtype: 'fieldset',
 232         title: 'Radio Groups',
 233         layout: 'anchor',
 234         defaults: {
 235             anchor: '100%',
 236             labelStyle: 'padding-left:4px;'
 237         },
 238         collapsible: true,
 239         items: [{
 240             xtype: 'textfield',
 241             name: 'txt-test4',
 242             fieldLabel: 'Alignment Test'
 243         },{
 244             xtype: 'radiogroup',
 245             fieldLabel: 'Auto Layout',
 246             cls: 'x-check-group-alt',
 247             items: [
 248                 {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
 249                 {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
 250                 {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
 251                 {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
 252                 {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
 253             ]
 254         },{
 255             xtype: 'radiogroup',
 256             fieldLabel: 'Single Column',
 257             columns: 1,
 258             items: [
 259                 {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
 260                 {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
 261                 {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
 262             ]
 263         },{
 264             xtype: 'radiogroup',
 265             fieldLabel: 'Multi-Column (horizontal)',
 266             cls: 'x-check-group-alt',
 267             columns: 3,
 268             items: [
 269                 {boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1},
 270                 {boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true},
 271                 {boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3},
 272                 {boxLabel: 'Item 1', name: 'rb-horiz-2', inputValue: 1, checked: true},
 273                 {boxLabel: 'Item 2', name: 'rb-horiz-2', inputValue: 2}
 274             ]
 275         },{
 276             xtype: 'radiogroup',
 277             fieldLabel: 'Multi-Column (vertical)',
 278             columns: 3,
 279             vertical: true,
 280             items: [
 281                 {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
 282                 {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
 283                 {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
 284                 {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
 285                 {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
 286             ]
 287         },{
 288             xtype: 'radiogroup',
 289             fieldLabel: 'Multi-Column<br />(custom widths)',
 290             cls: 'x-check-group-alt',
 291             columns: [100, 100],
 292             vertical: true,
 293             items: [
 294                 {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
 295                 {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
 296                 {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
 297                 {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
 298                 {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
 299             ]
 300         },{
 301             xtype: 'radiogroup',
 302             fieldLabel: 'Custom Layout<br />(w/ validation)',
 303             allowBlank: false,
 304             msgTarget: 'side',
 305             autoFitErrors: false,
 306             anchor: '-18',
 307             layout: 'column',
 308             defaultType: 'container',
 309             items: [{
 310                 columnWidth: .25,
 311                 items: [
 312                     {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
 313                     {xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
 314                     {xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
 315                 ]
 316             },{
 317                 columnWidth: .5,
 318                 items: [
 319                     {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
 320                     {xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
 321                 ]
 322             },{
 323                 columnWidth: .25,
 324                 items: [
 325                     {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
 326                     {xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
 327                     {xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
 328                 ]
 329             }]
 330         }]
 331     };
 332
 333
 334     // combine all that into one huge form
 335     var fp = Ext.create('Ext.FormPanel', {
 336         title: 'Check/Radio Groups Example',
 337         frame: true,
 338         fieldDefaults: {
 339             labelWidth: 110
 340         },
 341         width: 600,
 342         renderTo:'form-ct',
 343         bodyPadding: 10,
 344         items: [
 345             individual,
 346             checkGroup,
 347             radioGroup
 348         ],
 349         buttons: [{
 350             text: 'Save',
 351             handler: function(){
 352                if(fp.getForm().isValid()){
 353                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
 354                         fp.getForm().getValues(true).replace(/&/g,', '));
 355                 }
 356             }
 357         },{
 358             text: 'Reset',
 359             handler: function(){
 360                 fp.getForm().reset();
 361             }
 362         }]
 363     });
 364 });
 365