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>