ExtJs4_Checkbox_RadioGroups示例浅谈；

/**
 * ExtJs4
 * =》Checkbox_RadioGroups示例
 * 亮点：checkbox_radio的使用汇总；
 */
Ext.require([
    "Ext.form.*",
    "Ext.layout.container.Column",
    "Ext.window.MessageBox",
    "Ext.fx.target.Element"
]);
Ext.onReady(function() {
    //=> checkbox/radio examples
    var individual = {    // individual_单个的
        xtype: "container",
        layout: "hbox",     // 水平布局；
        margin: '0 0 10',
        
        items: [{
            xtype: "fieldset",
            flex: 1,
            title: "IndividualCheckboxes",
            defaultType: "checkbox",
            layout: "anchor",
            defaults: {
                anchor: "100%",
                hideEmptyLabel: false
            },
            
            items: [{
                fieldLabel: "Favorite Animals",
                boxLabel: "Dog",
                name: "fav-animal-dog",
                inputValue: "dog"
            }, {
                boxLabel: "Cat",
                name: "fav-animal-cat",
                inputValue: "cat"
            }, {
                checked: true,
                boxLabel: "Monkey",
                name: "fav-animal-monkey",
                inputValue: "monkey"
            }, {    // 补充；
                xtype: "textfield",
                fieldLabel: "Others",
                name: "otheranimal"
            }]
        }, {
            xtype: "component",
            width: 10
        }, {
            xtype: "fieldset",
            flex: 1,
            title: "IndividualRadios",
            defaultType: "radio",
            layout: "anchor",
            defaults: {
                anchor: "100%",
                hideEmptyLabel: false
            },
            
            items: [{
                checked: true,
                fieldLabel: "FavoriteColor",
                boxLabel: "Red",
                name: "fav-color",
                inputValue: "red"
            }, {
                boxLabel: "Blue",
                name: "fav-color",
                inputValue: "blue"
            }, {
                boxLabel: "Green",
                name: "fav-color",
                inputValue: "green"
            }, {
                xtype: "textfield",
                fieldLabel: "Others",
                name: "othercolor"
            }]
        }]
    };
    
    //=> CheckGroup example
    var checkGroup = {
        xtype: "fieldset",
        title: "CheckboxGroups",
        layout: "anchor",
        collapsible: true,     // 可伸缩；
        collapsed: true,    // 收起；
        defaults: {
            anchor: "100%",
            labelStyle: "padding-left: 4px;"
        },
        
        items: [{    // AutoLayout
            xtype: "checkboxgroup",
            fieldLabel: "AutoLayout",
            cls: "x-check-group-alt",    // 加深底纹颜色；
            items: [{
                boxLabel: "auto1", name: "cb-auto-1"    // 注意：如果不指定inputValue值，则默认为on;
            }, {
                boxLabel: "auto2", name: "cb-auto-2", checked: true
            }, {
                boxLabel: "auto3", name: "cb-auto-3"
            }, {
                boxLabel: "auto4", name: "cb-auto-4"
            }, {
                boxLabel: "auto5", name: "cb-auto-5"
            }]
        }, {    // single column
            xtype: "checkboxgroup",
            fieldLabel: "SingleColumn",
            columns: 1,
            items: [{
                boxLabel: "col1", name: 'cb-col-1'
            }, {
                boxLabel: "col2", name: 'cb-col-2', checked: true
            }, {
                boxLabel: "col3", name: 'cb-col-3'
            }]
        }, {    // Multi-column horizontal 水平
            xtype: "checkboxgroup",
            fieldLabel: "Multi-Column(horizontal)",
            cls: "x-check-group-alt",
            columns: 3,
            items: [{
                boxLabel: "horiz1", name: "cb-horiz-1"
            }, {
                boxLabel: "horiz2", name: "cb-horiz-2", checked: true
            }, {
                boxLabel: "horiz3", name: "cb-horiz-3"
            }, {
                boxLabel: "horiz4", name: "cb-horiz-4"
            }, {
                boxLabel: "horiz5", name: "cb-horiz-5"
            }]
        }, {    // Multi-column vertical 垂直
            xtype: "checkboxgroup",
            fieldLabel: "Multi-Column(vertical)",
            vertical: true, // filling each column from top to bottom before starting the next column;
            columns: 3,
            items: [{
                boxLabel: "vert1", name: "cb-vert-1"
            }, {
                boxLabel: "vert2", name: "cb-vert-2", checked: true
            }, {
                boxLabel: "vert3", name: "cb-vert-3"
            }, {
                boxLabel: "vert4", name: "cb-vert-4"
            }, {
                boxLabel: "vert5", name: "cb-vert-5"
            }]
        }, {    // Multi-column_custom widths
            xtype: "checkboxgroup",
            fieldLabel: "Multi-Column<br />(custom widths)",
            cls: "x-check-group-alt",
            vertical: true,
            columns: [100, 100],
            items: [{
                boxLabel: "custWidth1", name: "cb-custWidth", inputValue: "custWidth1"
            }, {
                boxLabel: "custWidth2", name: "cb-custWidth", inputValue: "custWidth2", checked: true
            }, {
                boxLabel: "custWidth3", name: "cb-custWidth", inputValue: "custWidth3"
            }, {
                boxLabel: "custWidth4", name: "cb-custWidth", inputValue: "custWidth4"
            }, {
                boxLabel: "custWidth5", name: "cb-custWidth", inputValue: "custWidth5"
            }]
        }, {    // CustomLayout validation
            xtype: "checkboxgroup",
            fieldLabel: "CustomLayout<br />(validation)",
            allowBlank: false,
            msgTarget: "side",
            autoFitErrors: false,
            anchor: "-18",
            
            layout: "column",
            defaultType: "container",
            items: [{
                columnWidth: .25,
                items: [{
                    xtype: "component", html: "Heading 1", cls: "x-form-check-group-label"
                }, {
                    xtype: "checkboxfield", boxLabel: "Item1", name: "cb-cust-1"
                }, {
                    xtype: "checkboxfield", boxLabel: "Item2", name: "cb-cust-2"
                }]
            }, {
                columnWidth: .5,
                items: [{
                    xtype: "component", html: "Heading 2", cls: "x-form-check-group-label"    // 加下划线；
                }, {
                    xtype: "checkboxfield", boxLabel: "Item3", name: "cb-cust-3"
                }]
            }, {
                columnWidth: .25,
                items: [{
                    xtype: "component", html: "Heading 3", cls: "x-form-check-group-label"
                }, {
                    xtype: "checkboxfield", boxLabel: "Item4", name: "cb-cust-4"
                }, {
                    xtype: "checkboxfield", boxLabel: "Item5", name: "cb-cust-5"
                }]
            }]
        }, {
            xtype: "textfield",
            fieldLabel: "补充说明",
            name: "aboutCheckgroup"
        }]
    };
    
    //=> RadioGroup examples
    var radioGroup = {
        xtype: "fieldset",
        title: "RadioGroup",
        collapsible: true,
        layout: "anchor",
        defaults: {
            anchor: "100%",
            labelStyle: "padding-left: 4px;"
        },
        
        items: [{
            xtype: "radiogroup",
            fieldLabel: "AutoLayout",
            cls: "x-check-group-alt",
            items: [{
                boxLabel: "auto1", name: "rd-auto", inputValue: 1
            }, {
                boxLabel: "auto2", name: "rd-auto", inputValue: 2, checked: true
            }, {
                boxLabel: "auto3", name: "rd-auto", inputValue: 3
            }, {
                boxLabel: "auto4", name: "rd-auto", inputValue: 4
            }, {
                boxLabel: "auto5", name: "rd-auto", inputValue: 5
            }]
        }, {
            xtype: "radiogroup",
            fieldLabel: "SingleColumn",
            columns: 1,
            items: [{
                boxLabel: "col1", name: 'rd-col', inputValue: 1
            }, {
                boxLabel: "col2", name: 'rd-col', inputValue: 2, checked: true
            }, {
                boxLabel: "col3", name: 'rd-col', inputValue: 3
            }]
        }, {
            xtype: "radiogroup",
            fieldLabel: "Multi-column(horizontal)",
            cls: "x-check-group-alt",
            columns: 3,
            items: [{
                boxLabel: "horiz1", name: "rdg-horiz", inputValue: 1
            }, {
                boxLabel: "horiz2", name: "rdg-horiz", inputValue: 2, checked: true
            }, {
                boxLabel: "horiz3", name: "rdg-horiz", inputValue: 3
            }, {
                boxLabel: "horiz4", name: "rdg-horiz", inputValue: 4
            }, {
                boxLabel: "horiz5", name: "rdg-horiz", inputValue: 5
            }]
        }, {
            xtype: "radiogroup",
            fieldLabel: "Multi-Column(vertical)",
            columns: 3,
            vertical: true,
            items: [{
                boxLabel: "vertical1", name: "rdg-vert", inputValue: 1
            }, {
                boxLabel: "vertical2", name: "rdg-vert", inputValue: 2, checked: true
            }, {
                boxLabel: "vertical3", name: "rdg-vert", inputValue: 3
            }, {
                boxLabel: "vertical4", name: "rdg-vert", inputValue: 4
            }, {
                boxLabel: "vertical5", name: "rdg-vert", inputValue: 5
            }]
        }, {
            xtype: "radiogroup",
            fieldLabel: "Multi-Column<br />(custom widths)",
            cls: "x-check-group-alt",
            columns: [100, 100],
            vertical: true,
            items: [{
                boxLabel: "custWidth1", name: "rdg-custWidth", inputValue: 1
            }, {
                boxLabel: "custWidth2", name: "rdg-custWidth", inputValue: 2, checked: true
            }, {
                boxLabel: "custWidth3", name: "rdg-custWidth", inputValue: 3
            }, {
                boxLabel: "custWidth4", name: "rdg-custWidth", inputValue: 4
            }, {
                boxLabel: "custWidth5", name: "rdg-custWidth", inputValue: 5
            }]
        }, {
            xtype: "radiogroup",
            fieldLabel: "CustomLyout<br />(validation)",
            allowBlank: false,
            msgTarget: "side",
            autoFitErrors: false,
            anchor: '-18',
            
            layout: "column",
            defaultType: "container",
            items: [{
                columnWidth: .25,
                items: [{
                    xtype: "component", html: "Heading1", cls: "x-form-check-group-label"
                }, {
                    xtype: "radiofield", boxLabel: "valid1", name: "rdg-validation", inputValue: 1
                }, {
                    xtype: "radiofield", boxLabel: "valid2", name: "rdg-validation", inputValue: 2
                }]
            }, {
                columnWidth: .5,
                items: [{
                    xtype: "component", html: "Heading2", cls: "x-form-check-group-label"
                }, {
                    xtype: "radiofield", boxLabel:"valid3", name: "rdg-validation", inputValue: 3
                }]
            }, {
                columnWidth: .25,
                items: [{
                    xtype: "component", html: "Heading3", cls: "x-form-check-group-label"
                }, {
                    xtype: "radiofield", boxLabel:"valid4", name: "rdg-validation", inputValue: 4
                }, {
                    xtype: "radiofield", boxLabel:"valid5", name: "rdg-validation", inputValue: 5
                }]
            }]
        }, {
            xtype: "textfield",
            fieldLabel: "补充说明",
            name: "aboutradiogroup"
        }]
    };
    
    //=> form表单
    var formpanel = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        
        title: "Check/Radio Groups Example",
        frame: true,
        width: 600,
        bodyBorder: true,
        bodyPadding: 10,
        fieldDefaults: {
            labelWidth: 110,
            labelAlign: "right"
        },
        
        items: [individual, checkGroup, radioGroup],
        buttons: [{
            text: "提交数据",
            handler: function(btn) {
                var bf = btn.up("form").getForm();
                if(bf.isValid()) {
                    var values = bf.getValues(true),
                        oldarray = values.replace(/[=]/g, ":").split('&');
                    for(var i=0, len=oldarray.length; i<len; i++) {
                        console.log(oldarray[i]);
                    }
                }
            }
        }, {
            text: "重置",
            handler: function(btn) {
                btn.up("form").getForm().reset();
            }
        }]
    });
});