docs/source/check-radio.html

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