<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.override(Ext.form.NumberField,{
unitText:'',
onRender:function(ct,position){
Ext.form.NumberField.superclass.onRender.call(this,ct,position);
if(this.unitText!=''){
//hn改
if(this.id=='height'){
var weight_ele=Ext.get('height');
weight_ele.createChild({
tag: 'div',
html: this.unitText,
cls:'x-form-unit'
});
}else if(this.id=='age'){
var weight_ele=Ext.get('age');
weight_ele.createChild({
tag: 'div',
html: this.unitText,
cls:'x-form-unit'
});
}else if(this.id=='weight'){
var weight_ele=Ext.get('weight');
weight_ele.createChild({
tag: 'div',
html: this.unitText,
cls:'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(){
//姓名
var txtusername = new Ext.form.TextField({
width:230,
allowBlank:false,
maxLength:4,
name:'username',
fieldLabel:'姓名',
blankText:'请输入姓名',
maxLengthText:'姓名不超过4个字节'
});
//政治面貌
//一个小巧的帮助类,用于更方便的从一个数组的数据来创建Ext.data.Store。
var combostore = new Ext.data.ArrayStore({
fields:['id','name'],
data:[[1,'团员'],[2,'党员'],[3,'其他']]
});
var cobpolitical = new Ext.form.ComboBox({
width:230,
allowBlank:false,
fieldLabel:'政治面貌',
store:combostore,
displayField:'name',
valueField:'id',
triggerAction:'all',//触发器被点击时执行的操作。all指定allQuery配置项执行查询
blankText:'请选择政治面貌',
emptyText:'请选择...',
editable:false,
mode:'local'
});
//毕业院校
var txtgraduateschool = new Ext.form .TextField({
width:230,
allowBlank:false,
maxLength:10,
name:'graduateschool',
fieldLabel:'毕业院校',
blankText:'请输入毕业院校',
maxLengthText:'毕业院校不能超过10个字符'
});
//通讯地址
var txtaddress = new Ext.form.TextField({
width:230,
allowBlank:false,
maxLength:30,
name:'address',
fieldLabel:'通讯地址',
blankText:'请输入通讯地址',
maxLengthText:'通讯地址不能超过30个字符'
});
//第一列包括4行
var column1 ={
type:'column',
// columnWidth:.28,
// layout:'form',
items:[txtusername,cobpolitical,txtgraduateschool,txtaddress]
};
//第二列开始
//性别
var rdosex = new Ext.form.RadioGroup({
fieldLabel:'性别',
width:230,
style:'padding-top:3px;height:17px;',
items:[{name:'sex',inputValue:'0',boxLabel:'男',checked:true},{name:'sex',inputValue:'1',boxLabel:'女'
}]
});
//身高
var numheight = new Ext.form.NumberField({
fieldLabel:'身高',
width:200,
decimalPrecision:0,
minValue:1,
maxValue:200,
unitText:'cm',
allowBlank:false,
id:'height',
style:"display: -webkit-inline-box;",//对于重写unitText属性很关键
blankText:'请输入身高'
});
//毕业专业
var txtprofessional = new Ext.form.TextField({
width:230,
allowBlank:false,
maxLength:30,
name:'professional',
fieldLabel:'毕业专业',
blankText:'请输入毕业专业',
maxLengthText:'毕业专业不能超过30个字符'
});
//联系电话
var txtphone = new Ext.form.TextField({
width:230,
allowBlank:false,
maxLength:20,
name:'phone',
fieldLabel:'联系电话',
blankText:'请输入联系电话',
maxLengthText:'联系电话不超过20个字符'
});
//第二列包括4行
var column2 = {
type:'column',
// columnWidth:0.28,
// layout:'form',
items:[rdosex,numheight,txtprofessional,txtphone]
};
//第三列
//年龄
var numage = new Ext.form.NumberField({
fieldLabel:'年龄',
width:200,
decimalPrecision:0,
minValue:1,
maxValue:60,
id:'age',
unitText:'岁',
allowBlank:false,
style:"display: -webkit-inline-box;",//对于重写unitText属性很关键
blankText:'请输入年龄'
});
//体重
var numweight = new Ext.form.NumberField({
fieldLabel:'体重',
width:200,
decimalPrecision:0,
minValue:1,
maxValue:300,
id:'weight',
name:'weight',
unitText:'kg',
allowBlank:false,
style:"display: -webkit-inline-box;",//对于重写unitText属性很关键
blankText:'请输入体重'
});
var dategraduation = new Ext.form.DateField({
fieldLabel:'毕业日期',
name:'graduatedate',
width:217,
format:'Y-m-d',
editable:false,
allowBlank:false,
blankText:'请选择毕业日期'
});
//第三列包含3行
var column3 = {
type:'column',
//columnWidth:.25,
//layout:'form',
items:[numage,dategraduation,numweight]
};
//第四列
var imagebox = new Ext.Component({
autoEl:{
style:'width:165px;height:160px;margin:2px auto;border:1px solid #ccc; text-align:center;padding-top:10px;margin-bottom:8px',
tag:'div',
id:'imageshow',
html:'暂无照片'
}
});
var uploadbutton = new Ext.Button({
text:'上传相片',
style:'margin:1px auto;',
handler:function(){
Ext.MessageBox.alert('提示','弹出新窗口上传相片!');
}
});
var column4 = {
// columnWidth:.16,
// layout:'form',
type:'column',
items:[imagebox,uploadbutton]
};
//招聘来源
var checksource = new Ext.form.CheckboxGroup({
fieldLabel: '招聘来源',
style: 'padding-top:3px;height:17px;',
items: [{
boxLabel: '报纸招聘',
inputValue: '0'
}, {
boxLabel: '校园招聘',
inputValue: '1'
}, {
boxLabel: '人才市场',
inputValue: '2'
}, {
boxLabel: '招聘网站',
inputValue: '3'
}]
});
//创建文本上传域
var exteditor = new Ext.form.HtmlEditor({
fieldLabel: '其他信息',
width: 745,
height: 220
});
//表单
var form = new Ext.form.FormPanel({
frame:true,
title:'员工信息表',
style:'margin:10px',
labelWidth:70,
buttonAlign:'center',
items:[{
layout:'column',
items:[column1,column2,column3,column4]
},checksource,exteditor],
buttons:[{ text:'保存',handler:function(){alert('保存方法!');}},
{ text:'重置',handler:function(){alert("重置方法!");}}
]
});
//窗体
var win = new Ext.Window({
title:'窗口',
width:900,
height:580,
resizable:true,
modal:true,
closable:true,
maximizable:true,
minimizable:true,
buttonAlign:'center',
items:form
});
win.show();
});
</script>
</body>
</html>