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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值