Ext.form.CheckboxGroup和Ext.form.RadioGroup组件示例

Ext.onReady(function ()
{
    var panelDemo = new Ext.form.Panel({
        title: "CheckboxGroup和RadioGroup组件示例",
        bodyStyle: "padding:5 5 5 5",
        frame: true,
        height: 140,
        width: 270,
        renderTo: "form",
        defaults: {
            labelSeparator: ":",
            labelWidth: 50,
            width: 200,
            labelAlign: "left"
        },
        items: [{
            xtype: "radiogroup",
            fieldLabel: "性别",
            columns: 2,
            id: "sexRadio",
            allowblank:false,
            items: [
                { boxLabel: "男", name: "sex", inputValue: "male" },
                { boxLabel: "女", name: "sex", inputValue: "female" }
            ]
        }, {
            xtype: "checkboxgroup",
            fieldLabel: "爱好",
            columns: 3,
            id: "interestchk",
            allowblank:false,
            items: [
                { boxLabel: "游泳", name: "swim" },
                { boxLabel: "散步", name: "walk" },
                { boxLabel: "阅读", name: "read" },
                { boxLabel: "游戏", name: "game" },
                { boxLabel: "电影", name: "move" }
            ]
        }],
        buttons: [{
            text: "重置",
            handler: function ()
            {
                panelDemo.getForm().reset();
            }
        }, {
            text: "保存",
            handler: function ()
            {
                var form = panelDemo.getForm();
                var sex = form.findField("sexRadio").items;
                var sexd = "";
                for (var i = 0; i < sex.length; i++)
                {
                    if (sex != null && sex.get(i).checked)
                    {
                        sexd += sex.get(i).boxLabel + ";";
                    }
                }
                var inter = form.findField("interestchk").items;
                var xq = "";
                for (var i = 0; i < inter.length; i++)
                {
                    if (inter!=null && inter.get(i).checked)
                    {
                        xq += "+" + inter.get(i).boxLabel;
                    }
                }
                Ext.MessageBox.alert("选择结果", "性别：" + sexd + ",兴趣爱好：" + xq);
            }
        }]
    });
});

在HTML前台页面中增加

<div id="form"></div>