ExtJS中FormPanel实例.docx
《ExtJS中FormPanel实例.docx》由会员分享，可在线阅读，更多相关《ExtJS中FormPanel实例.docx（19页珍藏版）》请在冰豆网上搜索。
ExtJS中FormPanel实例
效果图：
Register.js文件中内容
Register=function（）{
varregForm,regWindow;
varaccount;
varcouldRegister;
vareducation_data=
[
{education_value:
"小学"},
{education_value:
"初中"},
{education_value:
'高中'},
{education_value:
'中專'},
{education_value:
'大專'},
{education_value:
'大學'},
{education_value:
'本科'},
{education_value:
'碩士'},
{education_value:
'博士'}
];
vareducation_store=newExt.data.JsonStore（{
data:
education_data,
fields:
[{name:
'education_value',mapping:
'education_value'}]
}）;
varbuildForm=function（）{
regForm=newExt.FormPanel（{
////title:
'用户表单',
//monitorValid:
true,//启用监视表单组建状态（在必填项没有填写的时候做出提示）
//buttonAlign:
'center',//button按钮对齐方式默认left
bodyStyle:
'padding:
5px;',//表单距Panel之间的距离
//width:
200,//表单宽度
//autoHeight:
true,//表单自动调整适应高度
//autoWidth:
true,//表单自动调整事宜宽度
//frame:
true,//设置了面板的边角是圆弧过度的，底色,窗口是否显示背景色
//renderTo:
Ext.getBody（）,//将form表单添加到body中,或者添加到hTML元素中
//labelAlign:
'right',//标签对齐方式默认left
//labelWidth:
80,//标签宽度
////容器中组件默认统一配置选项
//defaults:
{
//allowBlank:
false,////验证字段是否能为空
//lableSeparator:
':
'//分隔符
//},
width:
800,
//autoHeight:
true,
frame:
true,
renderTo:
Ext.getBody（）,
layout:
"form",//整个大的表单是form布局
labelWidth:
65,
labelAlign:
"right",
items:
[
{//行1
layout:
"form",
//monitorValid:
true,
items:
[{
fieldLabel:
'用户账号',
id:
'account',
name:
'account',
allowBlank:
false,
xtype:
'textfield',
blankText:
'用户名不能为空！
',
validator:
checkAccount,//指定验证器
invalidText:
'用户名已经被注册！
',
width:
200
}]
},
{//行2
layout:
"form",
items:
[{
inputType:
'password',
fieldLabel:
'用户密码',
id:
'password',
name:
'password',
xtype:
'textfield',
allowBlank:
false,
blankText:
'密码不能为空！
',
width:
200
}]
},
{//行3
layout:
"form",
items:
[{
inputType:
'password',
fieldLabel:
'确认密码',
id:
'affirmPassword',
name:
'affirmPassword',
xtype:
'textfield',
blankText:
'确认密码不能为空！
',
invalidText:
'两次密码不一致！
',
allowBlank:
false,
width:
200,
validator:
function（）{
if（Ext.get（'password'）.dom.value==Ext
.get（'affirmPassword'）.dom.value）
returntrue;
returnfalse;}
}]
},
{//行4
layout:
"form",
items:
[{
xtype:
'textfield',
fieldLabel:
'真实姓名',
allowBlank:
false,
name:
'name',
width:
500
}]
},
//5
{
layout:
"column",//从左往右的布局
items:
[
{
columnWidth:
.5,
layout:
"form",
items:
[{
style:
'margin-top:
5px',
xtype:
'radio',
fieldLabel:
'性别',
boxLabel:
'男',
name:
'sex',
checked:
true,
inputValue:
'男',
width:
200
}]
},
{
columnWidth:
.5,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
style:
'margin-top:
5px',
xtype:
'radio',
fieldLabel:
'',
boxLabel:
'女',
name:
'sex',
inputValue:
'女',
width:
200
}]
}
]
},
{//行6
layout:
"form",
items:
[{
xtype:
'datefield',//日期型
fieldLabel:
'出生日期',
allowBlank:
false,
name:
'birthday',
width:
500
}]
},
{//行7
layout:
"form",
items:
[{
xtype:
'combo',
fieldLabel:
'最高学历',
store:
education_store,
mode:
'local',
emptyText:
'小學',
forceSelection:
true,
selectOnFocus:
true,
triggerAction:
'all',
typeAhead:
true,
valueField:
'education_value',
displayField:
'education_value',
name:
'education',
width:
500
}]
},
{//行8
layout:
"column",//从左往右的布局
items:
[
{
columnWidth:
.3,
layout:
"form",
items:
[{
xtype:
'checkbox',
fieldLabel:
'爱好',
boxLabel:
'游泳',
name:
'popedom',
inputValue:
'1'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'看书',
name:
'pepedom',
inputValue:
'2'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'旅游',
name:
'pepedom',
inputValue:
'3'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'篮球',
name:
'pepedom',
inputValue:
'4'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'其他',
name:
'pepedom',
inputValue:
'4'
//width:
250
}]
}
]
},
{//行8
layout:
"column",//从左往右的布局
items:
[
{
columnWidth:
.3,
layout:
"form",
items:
[{
xtype:
'checkbox',
fieldLabel:
'权限组',
boxLabel:
'系统管理员',
name:
'popedom',
inputValue:
'1'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'管理员',
name:
'pepedom',
inputValue:
'2'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'普通用户',
name:
'pepedom',
inputValue:
'3'
//width:
250
}]
},
{
columnWidth:
.15,
layout:
"form",
labelWidth:
0,
labelSeparator:
'',
hideLabels:
true,//不要Label
border:
false,
items:
[{
xtype:
'checkbox',
fieldLabel:
'',
boxLabel:
'访客',
name:
'pepedom',
inputValue:
'4'
//width:
250
}]
}
]
},
{//行10
layout:
"form",
items:
[{
xtype:
'textfield',
fieldLabel:
'家庭住址',
name:
'address',
width:
500
}]
},
{//行9
layout:
"form",
items:
[{
xtype:
'textfield',
fieldLabel:
'电子邮件',
vtype:
'email',
name:
'name',
allowBlank:
false,
blankText:
'电子邮件不能为空',
width:
500
}]
},
{//行10
layout:
"form",
items:
[{
xtype:
'textfield',
fieldLabel:
'个人主页',
vtype:
'url',
name:
'name',
width:
500
}]
},
{//行10
layout:
"form",
items:
[{
xtype:
'textfield',
fieldLabel:
'工作单位',
name:
'major',
width:
500
}]
},
{//行10
layout:
"form",
items:
[{
xtype:
'htmleditor',
fieldLabel:
'工作描述',
name:
'description',
width:
500
}]
}
],
buttons:
[{
text:
'注册',
type:
'submit',
formBind:
true,
handler:
register
},{
text:
'清空',
handler:
function（）{
regForm.form.reset（）;
}
}]
}）;
};
varbuildWin=function（）{
regWindow=newExt.Window（{
id:
'regwin',
title:
'用户注册',
layout:
'fit',
width:
800,
height:
650,
bodyStyle:
'padding:
4px',
maximizable:
false,
closeAction:
'close',
closable:
true,
collapsible:
true,
buttomAlign:
'right',
plain:
true,
items:
regForm
}）;
};
return{
init:
function（）{
Ext.BLANK_IMAGE_URL='../plugins/extjs/ext-2.0/resources/images/default/s.gif';
Ext.QuickTips.init（）;
Ext.form.Field.prototype.msgTarget='side';
buildForm（）;
buildWin（）;
//最后把窗口面板显示出来
regWindow.show（）;
}
}
}（）;
//Ext.onReady（Register.init,Register）;
Register.html
后台管理
body{background-color:
#777777}
#form-ct{width:
700px;margin-left:
auto;margin-right:
auto;}
展开阅读全文
升级会员 