[原]sencha touch之表单(login demo)

现在来说说sencha touch中的表单，举个简单的login的例子，相关的说明我都放在了注释中，看下面代码

 

Ext.application({
	id:'itKingApp',
	
	launch:function(){
		var formPanel=Ext.create('Ext.form.Panel',{
			id:'formPanel1',
			// 表示是否可以滑动，vertical=上下滑动 horizontal=左右滑动 both=上下左右都可以 flase=不滑动
			scrollable:'vertical',
			width:'700px',
			height:'400px',
			centered:true,
			style:{
				'padding':'1px'
			},
			items:[{
				xtype:'fieldset',
				title:'用户信息',
				instructions:'请填写用户信息',

				width:'640px',
				height:'180px',
				defaults:{
					// 主要设置了textfield的label长度，这里固定了150px，也可以设置百分比
					labelWidth:'150px'
				},
				items:[{
					xtype:'textfield',
					id:'txt_name',
					namle:'name',
					label:'用户名',
					placeHolder:'请输入用户名',
					// required=true label旁边有个* false则没有
					required:true,
					// 输入框中右侧的X按钮
					clearIcon:true,
					// 显示的label位置，有上下左右四种，默认是left（top， bottom，right）
					labelAlign:'left'
				},
				{
					xtype:'passwordfield',
					id:'txt_password',
					name:'password',
					label:'密码',
					placeHolder:'请输入密码',
					required:true,
					clearIcon:true
				}]
			},
			{
				xtype:'container',
				layout:{
					type:'vbox'
				},
				items:[
				{
					xtype:'button',
					text:'注册',
					width:'600px',
					style:{
						'margin-left':'30px'
					}
				},
				{
					xtype:'button',
					text:'登陆',
					width:'600px',
					style:{
						'margin-left':'30px',
						'margin-top':'10px'
					}
				}
				]
			}]
		});
		
		Ext.Viewport.add(formPanel);
	}
	
})

下面是效果图

 

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

作者：jjx0224 发表于2013-10-9 13:50:41 原文链接

阅读：210 评论：0 查看评论