examples/form/check-radio.js

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