<!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>
