examples/form/check-radio.js

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