sencha touch之表单二(注册页面)

接着上一篇的登陆页面,来一个最简单的注册页面,几乎包含了常用的field

Ext.application({
	id:'itKingApp',
	
	launch:function(){
		var formPanel=Ext.create('Ext.form.Panel',{
			id:'formPanel1',
			scrollable:'vertical',
			style:{
				'padding':'1px'
			},
			items:[{
				xtype:'fieldset',
				title:'用户注册',
				instructions:'请填写用户信息',
				defaults:{
					labelWidth:'150px'
				},
				items:[{
					xtype:'textfield',
					id:'txt_username',
					name:'username',
					label:'用户名',
					placeHolder:'请输入用户名',
					required:true,
					clearIcon:true,
					labelAlign:'left'
				},
				{
					xtype:'passwordfield',
					id:'txt_password',
					name:'password',
					label:'密码',
					placeHolder:'请输入密码',
					required:true,
					clearIcon:true
				},
				{
					xtype:'spinnerfield',
					id:'spn_age',
					name:'age',
					label:'年龄',
					placeHolder:'请输入年龄',
					minValue:1,
					maxValue:100,
					defaultValue:NaN,
					stepValue:1,
					required:true,
					clearIcon:true			
				},
				{
					xtype:'datepickerfield',
					id:'txt_bir',
					placeHolder:'请输入生日',
					label:'生日'
				},
				{
					xtype:'selectfield',
					label:'性别',
					options:[{
						text:'男性',
						value:'0'
					},{
						text:'女性',
						value:'1'
					}]
					
				},							
				{
					xtype:'emailfield',
					id:'txt_email',
					name:'email',
					label:'E-mail',
					placeHolder:'请输入E-mail地址',
					clearIcon:true
				},
				{
					xtype:'urlfield',
					id:'txt_url',
					name:'homepage',
					label:'Home Page',
					placeHolder:'请输入个人主页地址',
					clearIcon:true
				},			
				{
					xtype:'textareafield',
					id:'txt_textarea',
					name:'textarea',
					label:'个人介绍',
					placeHolder:'请输入个人简单介绍,在100字以内',
					maxlength:100,
					clearIcon:true
				}					
				]
			},
			{
				xtype:'container',
				layout:{
					type:'vbox'
				},
				items:[
				{
					xtype:'button',
					text:'注册',
					listeners:{
						tap:function(){
							Ext.Msg.alert('提示','注册成功');
						}
					}
				}
				]
			}]
		});
		
		Ext.Viewport.add(formPanel);
	}
	
})

下面是效果图:




以上代码都可以转载,但请说明下出处,多谢合作,http://blog.csdn.net/jjx0224/article/category/1650487

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值