ext--form

qincidong

浏览: 238973 次
性别:
来自: 北京

最近访客更多访客>>

abcd2010

qq1002517

samwong

OMGlalala

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ext

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

分享到：

ext--form layout | ext--tablepanel

2012-05-21 22:04
浏览 405
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext--form

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ext--form

评论

发表评论

相关推荐

EXT事件队列

Ext方法重写

Ext类继承

Ext类别名

Ext命名空间别名

Ext类的构造方法

Ext类静态方法

Ext为类增加属性和方法

Ext命名空间

ext--Ajax

ext--tablepanel

ext--form layout

ext--表单初始化

ext--表单验证

ext--window

ext--panel

ext--下拉列表

ext--消息框

ext--消息框2

ext--悬停提示

最近访客更多访客>>