无废话ExtJs单选组RadioGroup复选组CheckBoxGroup.docx
《无废话ExtJs单选组RadioGroup复选组CheckBoxGroup.docx》由会员分享，可在线阅读，更多相关《无废话ExtJs单选组RadioGroup复选组CheckBoxGroup.docx（16页珍藏版）》请在冰点文库上搜索。
无废话ExtJs单选组RadioGroup复选组CheckBoxGroup
无废话ExtJs[单选组：
RadioGroup、复选组：
CheckBoxGroup]
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http:
//www.w3.org/1999/xhtml">
<head>
<title></title>
<!
--ExtJs框架开始-->
<scripttype="text/javascript"src="/Ext/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="/Ext/ext-all.js"></script>
<scriptsrc="/Ext/src/locale/ext-lang-zh_CN.js"type="text/javascript"></script>
<linkrel="stylesheet"type="text/css"href="/Ext/resources/css/ext-all.css"/>
<!
--ExtJs框架结束-->
<styletype="text/css">
.x-form-unit
{
height:
22px;
line-height:
22px;
padding-left:
2px;
display:
inline-block;
display:
inline;
}
</style>
<scripttype="text/javascript">
Ext.override（Ext.form.TextField,{
unitText:
'',
onRender:
function（ct,position）{
Ext.form.TextField.superclass.onRender.call（this,ct,position）;
//如果单位字符串已定义则在后方增加单位对象
if（this.unitText!
=''）{
this.unitEl=ct.createChild（{
tag:
'div',
html:
this.unitText
}）;
this.unitEl.addClass（'x-form-unit'）;
//增加单位名称的同时按单位名称大小减少文本框的长度初步考虑了中英文混排未考虑为负的情况
this.width=this.width-（this.unitText.replace（/[^\x00-\xff]/g,"xx"）.length*6+2）;
//同时修改错误提示图标的位置
this.alignErrorIcon=function（）{
this.errorIcon.alignTo（this.unitEl,'tl-tr',[2,0]）;
};
}
}
}）;
Ext.onReady（function（）{
//初始化标签中的Ext:
Qtip属性。
Ext.QuickTips.init（）;
Ext.form.Field.prototype.msgTarget='side';
//提交按钮处理方法
varbtnsubmitclick=function（）{
Ext.MessageBox.alert（'提示','你点了确定按钮!
'）;
}
//重置按钮"点击时"处理方法
varbtnresetclick=function（）{
Ext.MessageBox.alert（'提示','你点了重置按钮!
'）;
}
//重置按钮"鼠标悬停"处理方法
varbtnresetmouseover=function（）{
Ext.MessageBox.alert（'提示','你鼠标悬停在重置按钮之上!
'）;
}
//提交按钮
varbtnsubmit=newExt.Button（{
text:
'提交',
handler:
btnsubmitclick
}）;
//重置按钮
varbtnreset=newExt.Button（{
text:
'重置',
listeners:
{
'mouseover':
btnresetmouseover,
'click':
btnresetclick
}
}）;
//用户名input
vartxtusername=newExt.form.TextField（{
width:
140,
allowBlank:
false,
maxLength:
20,
name:
'username',
fieldLabel:
'用户名称',
blankText:
'请输入用户名',
maxLengthText:
'用户名不能超过20个字符'
}）;
//密码input
vartxtpassword=newExt.form.TextField（{
width:
140,
allowBlank:
false,
maxLength:
20,
inputType:
'password',
name:
'password',
fieldLabel:
'密码',
blankText:
'请输入密码',
maxLengthText:
'密码不能超过20个字符'
}）;
varnumberfield=newExt.form.NumberField（{
fieldLabel:
'身高',
width:
80,
decimalPrecision:
1,
minValue:
0.01,
maxValue:
200,
unitText:
'cm',
allowBlank:
false,
blankText:
'请输入身高'
}）;
varhiddenfield=newExt.form.Hidden（{
name:
'userid',
value:
'1'
}）;
vardatefield=newExt.form.DateField（{
fieldLabel:
'出生日期',
format:
'Y-m-d',
editable:
false,
allowBlank:
false,
blankText:
'请选择日期'
}）;
//----------------------单选组开始----------------------//
varradiogroup=newExt.form.RadioGroup（{
fieldLabel:
'性别',
width:
100,
items:
[{
name:
'sex',
inputValue:
'0',
boxLabel:
'男',
checked:
true
},{
name:
'sex',
inputValue:
'1',
boxLabel:
'女'
}]
}）;
//获取单选组的值
radiogroup.on（'change',function（rdgroup,checked）{
alert（checked.getRawValue（））;
}）;
//----------------------单选组结束----------------------//
//----------------------复选组开始----------------------//
varcheckboxgroup=newExt.form.CheckboxGroup（{
fieldLabel:
'兴趣爱好',
width:
170,
items:
[{
boxLabel:
'看书',
inputValue:
'0'
},{
boxLabel:
'上网',
inputValue:
'1'
},{
boxLabel:
'听音乐',
inputValue:
'2'
}]
}）;
//获取复选组的值
checkboxgroup.on（'change',function（cbgroup,checked）{
for（vari=0;i<checked.length;i++）{
alert（checked[i].getRawValue（））;
}
}）;
//----------------------复选组结束----------------------//
//表单
varform=newExt.form.FormPanel（{
frame:
true,
title:
'表单标题',
style:
'margin:
10px',
html:
'<divstyle="padding:
10px">这里表单内容</div>',
items:
[txtusername,txtpassword,numberfield,hiddenfield,datefield,radiogroup,checkboxgroup],
buttons:
[btnsubmit,btnreset]
}）;
//窗体
varwin=newExt.Window（{
title:
'窗口',
width:
476,
height:
374,
html:
'<div>这里是窗体内容</div>',
resizable:
true,
modal:
true,
closable:
true,
maximizable:
true,
minimizable:
true,
buttonAlign:
'center',
items:
form
}）;
win.show（）;
}）;
</script>
</head>
<body>
<!
--
说明：
（1）varradiogroup=newExt.form.RadioGroup（）:
创建一个新的单选按钮组。
（2）name:
'sex'：
单选按钮组是按照name属性来区分的，同一组中的单选按钮才能单选，
如果name属性设置错误，该按钮将会被认为是其他组。
（3）inputValue:
'0'：
选择框的值。
（4）boxLabel:
'男':
选择框后面的文字说明。
（5）checked.getRawValue（）：
获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，
而复选框可以多选，所以要循环取出。
-->
</body>
</html><!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http:
//www.w3.org/1999/xhtml">
<head>
<title></title>
<!
--ExtJs框架开始-->
<scripttype="text/javascript"src="/Ext/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="/Ext/ext-all.js"></script>
<scriptsrc="/Ext/src/locale/ext-lang-zh_CN.js"type="text/javascript"></script>
<linkrel="stylesheet"type="text/css"href="/Ext/resources/css/ext-all.css"/>
<!
--ExtJs框架结束-->
<styletype="text/css">
.x-form-unit
{
height:
22px;
line-height:
22px;
padding-left:
2px;
display:
inline-block;
display:
inline;
}
</style>
<scripttype="text/javascript">Ext.override（Ext.form.TextField,{
unitText:
'',
onRender:
function（ct,position）{
Ext.form.TextField.superclass.onRender.call（this,ct,position）;
//如果单位字符串已定义则在后方增加单位对象
if（this.unitText!
=''）{
this.unitEl=ct.createChild（{
tag:
'div',
html:
this.unitText
}）;
this.unitEl.addClass（'x-form-unit'）;
//增加单位名称的同时按单位名称大小减少文本框的长度初步考虑了中英文混排未考虑为负的情况
this.width=this.width-（this.unitText.replace（/[^\x00-\xff]/g,"xx"）.length*6+2）;
//同时修改错误提示图标的位置
this.alignErrorIcon=function（）{
this.errorIcon.alignTo（this.unitEl,'tl-tr',[2,0]）;
};
}
}
}）;Ext.onReady（function（）{
//初始化标签中的Ext:
Qtip属性。
Ext.QuickTips.init（）;
Ext.form.Field.prototype.msgTarget='side';//提交按钮处理方法
varbtnsubmitclick=function（）{
Ext.MessageBox.alert（'提示','你点了确定按钮!
'）;
}
//重置按钮"点击时"处理方法
varbtnresetclick=function（）{
Ext.MessageBox.alert（'提示','你点了重置按钮!
'）;
}
//重置按钮"鼠标悬停"处理方法
varbtnresetmouseover=function（）{
Ext.MessageBox.alert（'提示','你鼠标悬停在重置按钮之上!
'）;
}
//提交按钮
varbtnsubmit=newExt.Button（{
text:
'提交',
handler:
btnsubmitclick
}）;
//重置按钮
varbtnreset=newExt.Button（{
text:
'重置',
listeners:
{
'mouseover':
btnresetmouseover,
'click':
btnresetclick
}
}）;
//用户名input
vartxtusername=newExt.form.TextField（{
width:
140,
allowBlank:
false,
maxLength:
20,
name:
'username',
fieldLabel:
'用户名称',
blankText:
'请输入用户名',
maxLengthText:
'用户名不能超过20个字符'
}）;
//密码input
vartxtpassword=newExt.form.TextField（{
width:
140,
allowBlank:
false,
maxLength:
20,
inputType:
'password',
name:
'password',
fieldLabel:
'密码',
blankText:
'请输入密码',
maxLengthText:
'密码不能超过20个字符'
}）;
varnumberfield=newExt.form.NumberField（{
fieldLabel:
'身高',
width:
80,
decimalPrecision:
1,
minValue:
0.01,
maxValue:
200,
unitText:
'cm',
allowBlank:
false,
blankText:
'请输入身高'
}）;varhiddenfield=newExt.form.Hidden（{
name:
'userid',
value:
'1'
}）;vardatefield=newExt.form.DateField（{
fieldLabel:
'出生日期',
format:
'Y-m-d',
editable:
false,
allowBlank:
false,
blankText:
'请选择日期'
}）;
//----------------------单选组开始----------------------//
varradiogroup=newExt.form.RadioGroup（{
fieldLabel:
'性别',
width:
100,
items:
[{
name:
'sex',
inputValue:
'0',
boxLabel:
'男',
checked:
true
},{
name:
'sex',
inputValue:
'1',
boxLabel:
'女'
}]
}）;
//获取单选组的值
radiogroup.on（'change',function（rdgroup,checked）{
alert（checked.getRawValue（））;
}）;
//----------------------单选组结束----------------------//
//----------------------复选组开始----------------------//
varcheckboxgroup=newExt.form.CheckboxGroup（{
fieldLabel:
'兴趣爱好',
width:
170,
items:
[{
boxLabel:
'看书',
inputValue:
'0'
},{
boxLabel:
'上网',
inputValue:
'1'
},{
boxLabel:
'听音乐',
inputValue:
'2'
}]
}）;
//获取复选组的值
checkboxgroup.on（'change',function（cbgroup,checked）{
for（vari=0;i<checked.length;i++）{
alert（checked[i].getRawValue（））;
}
}）;
//----------------------复选组结束----------------------//
//表单
varform=newExt.form.FormPanel（{
frame:
true,
title:
'表单标题',
style:
'margin:
10px',
html:
'<divstyle="padding:
10px">这里表单内容</div>',
items:
[txtusername,txtpassword,numberfield,hiddenfield,datefield,radiogroup,checkboxgroup],
buttons:
[btnsubmit,btnreset]
}）;
//窗体
varwin=newExt.Window（{
title:
'窗口',
width:
476,
height:
374,
html:
'<div>这里是窗体内容</div>',
resizable:
true,
modal:
true,
closable:
true,
maximizable:
true,
minimizable:
true,
buttonAlign:
'center',
items:
form
}）;
win.show（）;
}）;
</script>
</head>
<body>
<!
--
说明：
（1）varradiogroup=newExt.form.RadioGroup（）:
创建一个新的单选按钮组。
（2）name:
'sex'：
单选按钮组是按照name属性来区分的，同一组中的单选按钮才能单选，
如果name属性设置错误，该按钮将会被认为是其他组。
（3）inputValue:
'0'：
选择框的值。
（4）boxLabel:
'男':
选择框后面的文字说明。
（5）checked.getRawValue（）：
获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，
而复选框可以多选，所以要循环取出。
--&
升级会员 