/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/* * Ext JS Library 2.1 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com *  * http://extjs.com/license */Ext.onReady(function(){    Ext.QuickTips.init();        // turn on validation errors beside the field globally    Ext.form.Field.prototype.msgTarget = 'side';    var fp = new Ext.FormPanel({        frame: true,        title:'Check/Radio Groups',        labelWidth: 110,        width: 600,        renderTo:'form-ct',        bodyStyle: 'padding:0 10px 0;',                items: [{            layout: 'column',            border: false,            defaults: {                columnWidth: '.5',                border: false            },                        /*====================================================================             * 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.                        items: [{                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 examples             *====================================================================*/                        xtype:'fieldset',            title: 'Checkbox Groups',            autoHeight: true,            layout: 'form',            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.                        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}                    ]                }]            }]        }],                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();            }        }]    });});