无废话ExtJs单选组RadioGroup复选组CheckBoxGroupWord文件下载.docx
- 文档编号:5006833
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:16
- 大小:18.26KB
无废话ExtJs单选组RadioGroup复选组CheckBoxGroupWord文件下载.docx
《无废话ExtJs单选组RadioGroup复选组CheckBoxGroupWord文件下载.docx》由会员分享,可在线阅读,更多相关《无废话ExtJs单选组RadioGroup复选组CheckBoxGroupWord文件下载.docx(16页珍藏版)》请在冰点文库上搜索。
href="
/Ext/resources/css/ext-all.css"
/&
--ExtJs框架结束--&
styletype="
.x-form-unit
{
height:
22px;
line-height:
padding-left:
2px;
display:
inline-block;
inline;
}
/style&
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(){
你点了重置按钮!
鼠标悬停"
varbtnresetmouseover=function(){
你鼠标悬停在重置按钮之上!
//提交按钮
varbtnsubmit=newExt.Button({
text:
提交'
handler:
btnsubmitclick
//重置按钮
varbtnreset=newExt.Button({
重置'
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({
inputType:
password'
密码'
请输入密码'
密码不能超过20个字符'
varnumberfield=newExt.form.NumberField({
身高'
80,
decimalPrecision:
1,
minValue:
0.01,
maxValue:
200,
cm'
请输入身高'
varhiddenfield=newExt.form.Hidden({
userid'
value:
1'
vardatefield=newExt.form.DateField({
出生日期'
format:
Y-m-d'
editable:
请选择日期'
//----------------------单选组开始----------------------//
varradiogroup=newExt.form.RadioGroup({
性别'
100,
items:
[{
sex'
inputValue:
0'
boxLabel:
男'
checked:
true
},{
女'
}]
//获取单选组的值
radiogroup.on('
change'
function(rdgroup,checked){
alert(checked.getRawValue());
//----------------------单选组结束----------------------//
//----------------------复选组开始----------------------//
varcheckboxgroup=newExt.form.CheckboxGroup({
兴趣爱好'
170,
看书'
上网'
听音乐'
2'
//获取复选组的值
checkboxgroup.on('
function(cbgroup,checked){
for(vari=0;
i&
checked.length;
i++){
alert(checked[i].getRawValue());
//----------------------复选组结束----------------------//
//表单
varform=newExt.form.FormPanel({
frame:
true,
title:
表单标题'
style:
margin:
10px'
divstyle="
padding:
10px"
这里表单内容&
/div&
[txtusername,txtpassword,numberfield,hiddenfield,datefield,radiogroup,checkboxgroup],
buttons:
[btnsubmit,btnreset]
//窗体
varwin=newExt.Window({
窗口'
476,
374,
div&
这里是窗体内容&
resizable:
modal:
closable:
maximizable:
minimizable:
buttonAlign:
center'
form
win.show();
/head&
body&
--
说明:
(1)varradiogroup=newExt.form.RadioGroup():
创建一个新的单选按钮组。
(2)name:
:
单选按钮组是按照name属性来区分的,同一组中的单选按钮才能单选,
如果name属性设置错误,该按钮将会被认为是其他组。
(3)inputValue:
选择框的值。
(4)boxLabel:
选择框后面的文字说明。
(5)checked.getRawValue():
获取选择框的选中值,由于单选框只有一个选中值,可以直接获取,
而复选框可以多选,所以要循环取出。
--&
/body&
/html&
&
.x-form-unit
{
}
Ext.override(Ext.form.TextField,{
function(ct,position){
){
this.unitEl=ct.createChild({
this.unitText
this.alignErrorIcon=function(){
Ext.onReady(function(){
//提交按钮处理方法
varbtnsubmitclick=function(){
处理方法
varbtnresetclick=function(){
varbtnresetmouseover=function(){
//提交按钮
varbtnsubmit=newExt.Button({
btnsubmitclick
//重置按钮
varbtnreset=newExt.Button({
btnresetmouseover,
btnresetclick
//用户名input
vartxtusername=newExt.form.TextField({
140,
false,
20,
//密码input
vartxtpassword=newExt.form.TextField({
varnumberfield=newExt.form.NumberField({
80,
1,
0.01,
200,
varhiddenfield=newExt.form.Hidden({
vardatefield=newExt.form.DateField({
//----------------------单选组开始----------------------//
varradiogroup=newExt.form.RadioGroup({
100,
[{
true
},{
}]
//获取单选组的值
function(rdgroup,checked){
//----------------------单选组结束----------------------//
//----------------------复选组开始----------------------//
varcheckboxgroup=newExt.form.CheckboxGroup({
170,
//获取复选组的值
function(cbgroup,checked){
i++){
//----------------------复选组结束----------------------//
//表单
varform=newExt.form.FormPanel({
true,
[txtusername,txtpassword,numberfield,hiddenfield,datefield,radiogroup,checkboxgroup],
[btnsubmit,btnreset]
//窗体
varwin=newExt.Window({
476,
374,
form
--
说明:
(1)varradiogroup=newExt.form.RadioGroup():
(2)name:
单选按钮组是按照name属性来区分的,同一组中的单选按钮才能单选,
(3)inputValue:
(4)boxLabel:
(5)checked.getRawValue():
获取选择框的选中值,由于单选框只有一个选中值,可以直接获取,
--&
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 废话 ExtJs 单选组 RadioGroup 复选 CheckBoxGroup