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