ext--form

最新推荐文章于 2022-03-18 16:00:19 发布

luckystar2008

最新推荐文章于 2022-03-18 16:00:19 发布

阅读量650

点赞数

文章标签： function stylesheet action 音乐照片 html

本文链接：https://blog.csdn.net/qincidong/article/details/7588920

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
     <link rel="stylesheet" type="text/css"
			href="../ext/resources/css/ext-all.css">
		<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../ext/ext-all.js"></script>
		<script type="text/javascript">
			Ext.onReady(function(){
				//用户名
				var username = new Ext.form.TextField(
					{
						name:"employee.username",
						inputType:"text",
						fieldLabel:"用户名",
						width:500,
						allowBlank:false
					}
				);
				// 密码
				var password = new Ext.form.TextField(
					{
						name:"employee.password",
						inputType:"password",
						fieldLabel:"密码",
						width:500,
						allowBlank:false
					}
				);
				
				// 性别男
				var man = new Ext.form.Radio(
					{
						name:"employee.sex",
						inputValue:"男",//实际值
						boxLabel:"男",//显示值。
						width:200
					}
				);
				// 性别女
				var woman = new Ext.form.Radio(
					{
						name:"employee.sex",
						inputValue:"女",
						boxLabel:"女",
						width:200
					}
				);
				// 组合性别男女
				var sexGroup = new Ext.form.RadioGroup(
					{
						name:"employee.sex", // 实际有用name
						fieldLabel:"性别",//标签
						items:[man,woman],//组合项
						width:500//宽度。Radio中设置的宽度没有作用。					
					}
				);
				
				// 出生日期
				var birthday = new Ext.form.DateField(
					{
					 name:"employee.birthday",//name
					 fieldLabel:"出生日期",//label
					 value:new Date(),//默认值
					 width:500,//宽度
					 format:"Y-m-d"//日期格式。
					}
				);
				
				// 爱好
				//钓鱼
				var hobby1 = new Ext.form.Checkbox(
					{
						name:"hobby",//name
						inputValue:"钓鱼",//value
						boxLabel:"钓鱼",//label
					}
				);
				
				//上网
				var hobby2 = new Ext.form.Checkbox(
					{
						name:"hobby",//name
						inputValue:"上网",//value
						boxLabel:"上网",//label
					}
				);
				
				//爬山
				var hobby3 = new Ext.form.Checkbox(
					{
						name:"hobby",//name
						inputValue:"爬山",//value
						boxLabel:"爬山",//label
					}
				);
				
				//看电影
				var hobby4 = new Ext.form.Checkbox(
					{
						name:"hobby",//name
						inputValue:"看电影",//value
						boxLabel:"看电影",//label
					}
				);
				
				//听音乐
				var hobby5 = new Ext.form.Checkbox(
					{
						name:"hobby",//name
						inputValue:"听音乐",//value
						boxLabel:"听音乐",//label
						checked:true//checked?
					}
				);
				
				// 组合所有兴趣
				var hobbyGroup = new  Ext.form.CheckboxGroup(
					{
						name:"employee.hobby",
						fieldLabel:"您的爱好",
						items:[hobby1,hobby2,hobby3,hobby4,hobby5],
						width:500
					}
				); 
				
				// 最高学历,下拉列表
				var degreeData = [
					[1,"博士"],
					[2,"硕士"],
					[3,"研究生"],
					[4,"本科"],
					[5,"专科"],
					[6,"高中"],
					[7,"小学"]
				];
				
				var degreeProxy = new Ext.data.MemoryProxy(degreeData);
				
				var degreeRecord = new Ext.data.Record.create([
					{name:"id",type:"int",mapping:0},
					{name:"degree__",type:"string",mapping:1}]
				);
				
				var degreeReader = new Ext.data.ArrayReader({},degreeRecord);
				var degreeStore = new Ext.data.Store({proxy:degreeProxy,reader:degreeReader});
				degreeStore.load();//加载数据。
				var degree = new Ext.form.ComboBox(
					{
						name:"employee.degree",
						store:degreeStore,
						triggerAction:"all",
						value:4,
						fieldLabel:"最高学历",
						mode:"local",
						displayField:"degree__",
						valueField:"id",
						emptyText:"请选择最高学历",
						width:500
					}
				);
				
				//幸运数字
				var luckyNumber = new Ext.form.NumberField(
					{
						name:"employee.luckyNumber",
						fieldLabel:"幸运数字",
						allowBlank:false,
						width:500
					}
				);
				
				// 上班时间
				var workTime = new Ext.form.TimeField(
					{
						name:"employee.workTime",
						fieldLabel:"上班时间",
						increment:30,//时间增量，默认是15分钟
						format:"H:i",//时间格式。24H
						width:500
					}
				);
				
				// 下班时间
				var noWorkTime = new Ext.form.TimeField(
					{
						name:"employee.noWorkTime",
						fieldLabel:"下班时间",
						increment:15,
						format:"H:i",
						width:500
					}
				);
				// 照片
				var photo = new Ext.form.TextField(
					{
						name:"employee.photo",
						inputType:"file",
						fieldLabel:"照片",
						width:500
					}
				);
				// 个人简介
				var introduction = new Ext.form.TextArea(
					{
						name:"employee.introduction",
						fieldLabel:"个人简介",
						width:500,
						height:200	
					}
				);
				// 补充说明
				var additionalInfo = new Ext.form.HtmlEditor(
					{
						name:"employee.additionalInfo",
						fieldLabel:"补充说明",
						height:200,
						width:500
					}
				);

				// 提交按钮
				var submit = {
					text:"保存",
					icon:"../ext/resources/images/default/dd/drop-yes.gif",//按钮前加图片
					cls:"x-btn-text-icon",//为图片预留位置，不然会把文字覆盖掉。
					handler:function(){
						f.getForm().submit(
							{
								success:function(f,action){
									Ext.Msg.alert("系统提示",action.result.msg);
								},
								failure:function(f,action){
									Ext.Msg.alert("系统提示",action.result.msg);
								}
							}
						);
					}
				};
				
				// 重置按钮
				var reset = {
					text:"重置",
					icon:"../ext/resources/images/default/dd/drop-no.gif",//按钮前加图片
					cls:"x-btn-text-icon",//为图片预留位置，不然会把文字覆盖掉。
					handler:function(){
						f.getForm().reset();
					}
				};
				
				var f = new Ext.form.FormPanel(
					{
						title:"新增员工",
						url:"employee!doAdd.action",
						method:"post",
						renderTo:"f",
						width:700,
						style:"padding:5px",
						frame:true,
						items:[
							username,
							password,
							sexGroup,
							birthday,
							hobbyGroup,
							degree,
							luckyNumber,
							workTime,
							noWorkTime,
							photo,
							introduction,
							additionalInfo
							],
						buttons:[submit,reset]
					}
				);
			});
		</script>
  </head>
  
  <body>
  	<div id="f"></div>
  </body>
</html>

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext--form

form2.html <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> Ext.onReady(function(){ //用户名 var username = new Ext.form.T
复制链接

扫一扫