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
(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
(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
(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
(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
(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
(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:
'+ fp.getForm().getValues(true).replace(/&/g,', ')); } } },{ text: 'Reset', handler: function(){ fp.getForm().reset(); } }] }); });