ExtJS中FormPanel实例.docx
- 文档编号:30680691
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:19
- 大小:55.34KB
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;}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS FormPanel 实例