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

来源：互联网发布：淘宝助手有什么用处编辑：程序博客网时间：2024/05/21 00:01

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>

0 0