Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / form / check-radio.js
index 4639363..280ff6f 100644 (file)
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-\r
-Ext.onReady(function(){\r
-\r
-    Ext.QuickTips.init();\r
-    \r
-    // turn on validation errors beside the field globally\r
-    Ext.form.Field.prototype.msgTarget = 'side';\r
-\r
-    var fp = new Ext.FormPanel({\r
-        frame: true,\r
-        title:'Check/Radio Groups',\r
-        labelWidth: 110,\r
-        width: 600,\r
-        renderTo:'form-ct',\r
-        bodyStyle: 'padding:0 10px 0;',\r
-        \r
-        items: [{\r
-            layout: 'column',\r
-            border: false,\r
-            defaults: {\r
-                columnWidth: '.5',\r
-                border: false\r
-            },\r
-            \r
-            /*====================================================================\r
-             * Individual checkbox/radio examples\r
-             *====================================================================*/\r
-            \r
-            // Using checkbox/radio groups will generally be easier and more flexible than\r
-            // using individual checkbox and radio controls, but this shows that you can\r
-            // certainly do so if you only need a single control, or if you want to control  \r
-            // exactly where each check/radio goes within your layout.\r
-            \r
-            items: [{\r
-                bodyStyle: 'padding-right:5px;',\r
-                items:         {\r
-                    xtype:'fieldset',\r
-                    title: 'Individual Checkboxes',\r
-                    autoHeight: true,\r
-                    defaultType: 'checkbox',  // each item will be a checkbox\r
-                    items: [{\r
-                        xtype: 'textfield',\r
-                        name: 'txt-test1',\r
-                        fieldLabel: 'Alignment Test'\r
-                    },{\r
-                        fieldLabel: 'Favorite Animals',\r
-                        boxLabel: 'Dog',\r
-                        name: 'fav-animal-dog'\r
-                    },{\r
-                        fieldLabel: '',\r
-                        labelSeparator: '',\r
-                        boxLabel: 'Cat',\r
-                        name: 'fav-animal-cat'\r
-                    },{\r
-                        checked: true,\r
-                        fieldLabel: '',\r
-                        labelSeparator: '',\r
-                        boxLabel: 'Monkey',\r
-                        name: 'fav-animal-monkey'\r
-                    }]\r
-                }\r
-            },{\r
-                bodyStyle: 'padding-left:5px;',\r
-                items: {\r
-                    xtype:'fieldset',\r
-                    title: 'Individual Radios',\r
-                    autoHeight: true,\r
-                    defaultType: 'radio',  // each item will be a radio button\r
-                    items: [{\r
-                        xtype: 'textfield',\r
-                        name: 'txt-test2',\r
-                        fieldLabel: 'Alignment Test'\r
-                    },{\r
-                        checked: true,\r
-                        fieldLabel: 'Favorite Color',\r
-                        boxLabel: 'Red',\r
-                        name: 'fav-color',\r
-                        inputValue: 'red'\r
-                    },{\r
-                        fieldLabel: '',\r
-                        labelSeparator: '',\r
-                        boxLabel: 'Blue',\r
-                        name: 'fav-color',\r
-                        inputValue: 'blue'\r
-                    },{\r
-                        fieldLabel: '',\r
-                        labelSeparator: '',\r
-                        boxLabel: 'Green',\r
-                        name: 'fav-color',\r
-                        inputValue: 'green'\r
-                    }]\r
-                }\r
-            }]\r
-        },{\r
-            \r
-            /*====================================================================\r
-             * CheckGroup examples\r
-             *====================================================================*/\r
-            \r
-            xtype:'fieldset',\r
-            title: 'Checkbox Groups',\r
-            autoHeight: true,\r
-            layout: 'form',\r
-            items: [{\r
-                xtype: 'textfield',\r
-                name: 'txt-test3',\r
-                fieldLabel: 'Alignment Test',\r
-                anchor: '95%'\r
-            },{\r
-                // Use the default, automatic layout to distribute the controls evenly\r
-                // across a single row\r
-                xtype: 'checkboxgroup',\r
-                fieldLabel: 'Auto Layout',\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'cb-auto-1'},\r
-                    {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},\r
-                    {boxLabel: 'Item 3', name: 'cb-auto-3'},\r
-                    {boxLabel: 'Item 4', name: 'cb-auto-4'},\r
-                    {boxLabel: 'Item 5', name: 'cb-auto-5'}\r
-                ]\r
-            },{\r
-                xtype: 'checkboxgroup',\r
-                fieldLabel: 'Single Column',\r
-                itemCls: 'x-check-group-alt',\r
-                // Put all controls in a single column with width 100%\r
-                columns: 1,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'cb-col-1'},\r
-                    {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},\r
-                    {boxLabel: 'Item 3', name: 'cb-col-3'}\r
-                ]\r
-            },{\r
-                xtype: 'checkboxgroup',\r
-                fieldLabel: 'Multi-Column (horizontal)',\r
-                // Distribute controls across 3 even columns, filling each row\r
-                // from left to right before starting the next row\r
-                columns: 3,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'cb-horiz-1'},\r
-                    {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},\r
-                    {boxLabel: 'Item 3', name: 'cb-horiz-3'},\r
-                    {boxLabel: 'Item 4', name: 'cb-horiz-4'},\r
-                    {boxLabel: 'Item 5', name: 'cb-horiz-5'}\r
-                ]\r
-            },{\r
-                xtype: 'checkboxgroup',\r
-                fieldLabel: 'Multi-Column (vertical)',\r
-                itemCls: 'x-check-group-alt',\r
-                // Distribute controls across 3 even columns, filling each column\r
-                // from top to bottom before starting the next column\r
-                columns: 3,\r
-                vertical: true,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'cb-vert-1'},\r
-                    {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},\r
-                    {boxLabel: 'Item 3', name: 'cb-vert-3'},\r
-                    {boxLabel: 'Item 4', name: 'cb-vert-4'},\r
-                    {boxLabel: 'Item 5', name: 'cb-vert-5'}\r
-                ]\r
-            },{\r
-                xtype: 'checkboxgroup',\r
-                fieldLabel: 'Multi-Column<br />(custom widths)',\r
-                // Specify exact column widths (could also include float values for %)\r
-                columns: [100, 100],\r
-                vertical: true,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},\r
-                    {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},\r
-                    {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},\r
-                    {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},\r
-                    {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}\r
-                ]\r
-            },{\r
-                xtype: 'checkboxgroup',\r
-                itemCls: 'x-check-group-alt',\r
-                fieldLabel: 'Custom Layout<br />(w/ validation)',\r
-                allowBlank: false,\r
-                anchor: '95%',\r
-                items: [{\r
-                    // You can pass sub-item arrays along with width/columnWidth configs \r
-                    // ColumnLayout-style for complete layout control.  In this example we\r
-                    // only want one item in the middle column, which would not be possible\r
-                    // using the columns config.  We also want to make sure that our headings\r
-                    // end up at the top of each column as expected.\r
-                    columnWidth: '.25',\r
-                    items: [\r
-                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},\r
-                        {boxLabel: 'Item 1', name: 'cb-cust-1'},\r
-                        {boxLabel: 'Item 2', name: 'cb-cust-2'}\r
-                    ]\r
-                },{\r
-                    columnWidth: '.5',\r
-                    items: [\r
-                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},\r
-                        {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}\r
-                    ]\r
-                },{\r
-                    columnWidth: '.25',\r
-                    items: [\r
-                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},\r
-                        {boxLabel: 'Item 4', name: 'cb-cust-4'},\r
-                        {boxLabel: 'Item 5', name: 'cb-cust-5'}\r
-                    ]\r
-                }]\r
-            }]\r
-        },{\r
-            \r
-            /*====================================================================\r
-             * RadioGroup examples\r
-             *====================================================================*/\r
-            // NOTE: These radio examples use the exact same options as the checkbox ones\r
-            // above, so the comments will not be repeated.  Please see comments above for\r
-            // additional explanation on some config options.\r
-            \r
-            xtype:'fieldset',\r
-            title: 'Radio Groups',\r
-            autoHeight: true,\r
-            items: [{\r
-                xtype: 'textfield',\r
-                name: 'txt-test4',\r
-                fieldLabel: 'Alignment Test',\r
-                anchor: '95%'\r
-            },{\r
-                xtype: 'radiogroup',\r
-                fieldLabel: 'Auto Layout',\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},\r
-                    {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},\r
-                    {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},\r
-                    {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},\r
-                    {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}\r
-                ]\r
-            },{\r
-                xtype: 'radiogroup',\r
-                fieldLabel: 'Single Column',\r
-                itemCls: 'x-check-group-alt',\r
-                columns: 1,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},\r
-                    {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},\r
-                    {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}\r
-                ]\r
-            },{\r
-                xtype: 'radiogroup',\r
-                fieldLabel: 'Multi-Column<br />(horiz. auto-width)',\r
-                columns: 3,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},\r
-                    {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},\r
-                    {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},\r
-                    {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},\r
-                    {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}\r
-                ]\r
-            },{\r
-                xtype: 'radiogroup',\r
-                fieldLabel: 'Multi-Column<br />(vert. auto-width)',\r
-                itemCls: 'x-check-group-alt',\r
-                columns: 3,\r
-                vertical: true,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},\r
-                    {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},\r
-                    {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},\r
-                    {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},\r
-                    {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}\r
-                ]\r
-            },{\r
-                xtype: 'radiogroup',\r
-                fieldLabel: 'Multi-Column<br />(custom widths)',\r
-                columns: [100, 100],\r
-                vertical: true,\r
-                items: [\r
-                    {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},\r
-                    {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},\r
-                    {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},\r
-                    {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},\r
-                    {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}\r
-                ]\r
-            },{\r
-                xtype: 'radiogroup',\r
-                itemCls: 'x-check-group-alt',\r
-                fieldLabel: 'Custom Layout<br />(w/ validation)',\r
-                allowBlank: false,\r
-                anchor: '95%',\r
-                items: [{\r
-                    columnWidth: '.25',\r
-                    items: [\r
-                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},\r
-                        {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},\r
-                        {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}\r
-                    ]\r
-                },{\r
-                    columnWidth: '.5',\r
-                    items: [\r
-                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},\r
-                        {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}\r
-                    ]\r
-                },{\r
-                    columnWidth: '.25',\r
-                    items: [\r
-                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},\r
-                        {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},\r
-                        {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}\r
-                    ]\r
-                }]\r
-            }]\r
-        }],\r
-        \r
-        buttons: [{\r
-            text: 'Save',\r
-            handler: function(){\r
-               if(fp.getForm().isValid()){\r
-                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ \r
-                        fp.getForm().getValues(true).replace(/&/g,', '));\r
-                }\r
-            }\r
-        },{\r
-            text: 'Reset',\r
-            handler: function(){\r
-                fp.getForm().reset();\r
-            }\r
-        }]\r
-    });\r
-});\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+    
+    // turn on validation errors beside the field globally
+    Ext.form.Field.prototype.msgTarget = 'side';
+
+
+    /*====================================================================
+     * Individual checkbox/radio examples
+     *====================================================================*/
+    
+    // Using checkbox/radio groups will generally be easier and more flexible than
+    // using individual checkbox and radio controls, but this shows that you can
+    // certainly do so if you only need a single control, or if you want to control  
+    // exactly where each check/radio goes within your layout.
+    var individual = [{
+        bodyStyle: 'padding-right:5px;',
+        items: {
+            xtype: 'fieldset',
+            title: 'Individual Checkboxes',
+            autoHeight: true,
+            defaultType: 'checkbox', // each item will be a checkbox
+            items: [{
+                xtype: 'textfield',
+                name: 'txt-test1',
+                fieldLabel: 'Alignment Test'
+            }, {
+                fieldLabel: 'Favorite Animals',
+                boxLabel: 'Dog',
+                name: 'fav-animal-dog'
+            }, {
+                fieldLabel: '',
+                labelSeparator: '',
+                boxLabel: 'Cat',
+                name: 'fav-animal-cat'
+            }, {
+                checked: true,
+                fieldLabel: '',
+                labelSeparator: '',
+                boxLabel: 'Monkey',
+                name: 'fav-animal-monkey'
+            }]
+        }
+    }, {
+        bodyStyle: 'padding-left:5px;',
+        items: {
+            xtype: 'fieldset',
+            title: 'Individual Radios',
+            autoHeight: true,
+            defaultType: 'radio', // each item will be a radio button
+            items: [{
+                xtype: 'textfield',
+                name: 'txt-test2',
+                fieldLabel: 'Alignment Test'
+            }, {
+                checked: true,
+                fieldLabel: 'Favorite Color',
+                boxLabel: 'Red',
+                name: 'fav-color',
+                inputValue: 'red'
+            }, {
+                fieldLabel: '',
+                labelSeparator: '',
+                boxLabel: 'Blue',
+                name: 'fav-color',
+                inputValue: 'blue'
+            }, {
+                fieldLabel: '',
+                labelSeparator: '',
+                boxLabel: 'Green',
+                name: 'fav-color',
+                inputValue: 'green'
+            }]
+        }
+    }];
+    
+    /*====================================================================
+     * CheckGroup example
+     *====================================================================*/
+    var checkGroup = {
+        xtype: 'fieldset',
+        title: 'Checkbox Groups (initially collapsed)',
+        autoHeight: true,
+        layout: 'form',
+        collapsed: true,   // initially collapse the group
+        collapsible: true,
+        items: [{
+            xtype: 'textfield',
+            name: 'txt-test3',
+            fieldLabel: 'Alignment Test',
+            anchor: '95%'
+        },{
+            // Use the default, automatic layout to distribute the controls evenly
+            // across a single row
+            xtype: 'checkboxgroup',
+            fieldLabel: 'Auto Layout',
+            items: [
+                {boxLabel: 'Item 1', name: 'cb-auto-1'},
+                {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
+                {boxLabel: 'Item 3', name: 'cb-auto-3'},
+                {boxLabel: 'Item 4', name: 'cb-auto-4'},
+                {boxLabel: 'Item 5', name: 'cb-auto-5'}
+            ]
+        },{
+            xtype: 'checkboxgroup',
+            fieldLabel: 'Single Column',
+            itemCls: 'x-check-group-alt',
+            // Put all controls in a single column with width 100%
+            columns: 1,
+            items: [
+                {boxLabel: 'Item 1', name: 'cb-col-1'},
+                {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
+                {boxLabel: 'Item 3', name: 'cb-col-3'}
+            ]
+        },{
+            xtype: 'checkboxgroup',
+            fieldLabel: 'Multi-Column (horizontal)',
+            // Distribute controls across 3 even columns, filling each row
+            // from left to right before starting the next row
+            columns: 3,
+            items: [
+                {boxLabel: 'Item 1', name: 'cb-horiz-1'},
+                {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
+                {boxLabel: 'Item 3', name: 'cb-horiz-3'},
+                {boxLabel: 'Item 4', name: 'cb-horiz-4'},
+                {boxLabel: 'Item 5', name: 'cb-horiz-5'}
+            ]
+        },{
+            xtype: 'checkboxgroup',
+            fieldLabel: 'Multi-Column (vertical)',
+            itemCls: 'x-check-group-alt',
+            // Distribute controls across 3 even columns, filling each column
+            // from top to bottom before starting the next column
+            columns: 3,
+            vertical: true,
+            items: [
+                {boxLabel: 'Item 1', name: 'cb-vert-1'},
+                {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
+                {boxLabel: 'Item 3', name: 'cb-vert-3'},
+                {boxLabel: 'Item 4', name: 'cb-vert-4'},
+                {boxLabel: 'Item 5', name: 'cb-vert-5'}
+            ]
+        },{
+            xtype: 'checkboxgroup',
+            fieldLabel: 'Multi-Column<br />(custom widths)',
+            // Specify exact column widths (could also include float values for %)
+            columns: [100, 100],
+            vertical: true,
+            items: [
+                {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
+                {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
+                {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
+                {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
+                {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
+            ]
+        },{
+            xtype: 'checkboxgroup',
+            itemCls: 'x-check-group-alt',
+            fieldLabel: 'Custom Layout<br />(w/ validation)',
+            allowBlank: false,
+            anchor: '95%',
+            items: [{
+                // You can pass sub-item arrays along with width/columnWidth configs 
+                // ColumnLayout-style for complete layout control.  In this example we
+                // only want one item in the middle column, which would not be possible
+                // using the columns config.  We also want to make sure that our headings
+                // end up at the top of each column as expected.
+                columnWidth: '.25',
+                items: [
+                    {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
+                    {boxLabel: 'Item 1', name: 'cb-cust-1'},
+                    {boxLabel: 'Item 2', name: 'cb-cust-2'}
+                ]
+            },{
+                columnWidth: '.5',
+                items: [
+                    {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
+                    {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
+                ]
+            },{
+                columnWidth: '.25',
+                items: [
+                    {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
+                    {boxLabel: 'Item 4', name: 'cb-cust-4'},
+                    {boxLabel: 'Item 5', name: 'cb-cust-5'}
+                ]
+            }]
+        }]
+    };
+    
+    /*====================================================================
+     * RadioGroup examples
+     *====================================================================*/
+    // NOTE: These radio examples use the exact same options as the checkbox ones
+    // above, so the comments will not be repeated.  Please see comments above for
+    // additional explanation on some config options.
+    
+    var radioGroup = {
+        
+        xtype: 'fieldset',
+        title: 'Radio Groups',
+        autoHeight: true,
+        items: [{
+            xtype: 'textfield',
+            name: 'txt-test4',
+            fieldLabel: 'Alignment Test',
+            anchor: '95%'
+        },{
+            xtype: 'radiogroup',
+            fieldLabel: 'Auto Layout',
+            items: [
+                {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
+                {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
+                {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
+                {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
+                {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
+            ]
+        },{
+            xtype: 'radiogroup',
+            fieldLabel: 'Single Column',
+            itemCls: 'x-check-group-alt',
+            columns: 1,
+            items: [
+                {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
+                {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
+                {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
+            ]
+        },{
+            xtype: 'radiogroup',
+            fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
+            columns: 3,
+            items: [
+                {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
+                {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
+                {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
+                {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
+                {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
+            ]
+        },{
+            xtype: 'radiogroup',
+            fieldLabel: 'Multi-Column<br />(vert. auto-width)',
+            itemCls: 'x-check-group-alt',
+            columns: 3,
+            vertical: true,
+            items: [
+                {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
+                {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
+                {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
+                {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
+                {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
+            ]
+        },{
+            xtype: 'radiogroup',
+            fieldLabel: 'Multi-Column<br />(custom widths)',
+            columns: [100, 100],
+            vertical: true,
+            items: [
+                {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
+                {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
+                {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
+                {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
+                {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
+            ]
+        },{
+            xtype: 'radiogroup',
+            itemCls: 'x-check-group-alt',
+            fieldLabel: 'Custom Layout<br />(w/ validation)',
+            allowBlank: false,
+            anchor: '95%',
+            items: [{
+                columnWidth: '.25',
+                items: [
+                    {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
+                    {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
+                    {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
+                ]
+            },{
+                columnWidth: '.5',
+                items: [
+                    {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
+                    {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
+                ]
+            },{
+                columnWidth: '.25',
+                items: [
+                    {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
+                    {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
+                    {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
+                ]
+            }]
+        }]
+    };
+    
+    // combine all that into one huge form
+    var fp = new Ext.FormPanel({
+        title: 'Check/Radio Groups Example',
+        frame: true,
+        labelWidth: 110,
+        width: 600,
+        renderTo:'form-ct',
+        bodyStyle: 'padding:0 10px 0;',
+        items: [
+            {
+                layout: 'column',
+                border: false,
+                // defaults are applied to all child items unless otherwise specified by child item
+                defaults: {
+                    columnWidth: '.5',
+                    border: false
+                },            
+                items: individual
+            },
+            checkGroup,
+            radioGroup
+        ],
+        buttons: [{
+            text: 'Save',
+            handler: function(){
+               if(fp.getForm().isValid()){
+                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
+                        fp.getForm().getValues(true).replace(/&/g,', '));
+                }
+            }
+        },{
+            text: 'Reset',
+            handler: function(){
+                fp.getForm().reset();
+            }
+        }]
+    });
+});
\ No newline at end of file