sencha touch2学习笔记(三)----form表单容器及其子组件

 

 

原文链接：http://chennaigong.iteye.com/blog/1546309

 

sencha touch2封装了很多的UI组件，今天标记下学过的组件---formPanel。var formPanel=Ext.create(

 

它的包名为Ext.form.Panel。所以创建的时候代码如下：

 

 

	"Ext.form.Panel",
		{
			fullscreen:true,
			items:[
			{}
                       ]
                 })

items里可嵌套入很多组件，这里我嵌入了很基本的一些组件。代码如下:

Ext.application(
{
	name:"sencha",
	launch:function()
	{
		var spinner = Ext.create('Ext.field.Spinner', {
		    label: '步骤加1',
		    minValue: 0,
		    maxValue: 10,
		    increment: 2,
		    cycle: true
		});
		var formPanel=Ext.create(
		"Ext.form.Panel",
		{
			fullscreen:true,
			items:[
			{
				xtype:"fieldset",
				items:[
				{
					xtype:"textfield",
					name:"name",
					label:"姓名"
				},
				{
					xtype:"emailfield",
					name:"email",
					label:"邮箱"
				},
				{
					xtype:"passwordfield",
					name:"password",
					label:"密码"
				},
				{
                    xtype: 'numberfield',
                    label: '数字',
                    minValue: 18,
                    maxValue: 150,
                    name: 'age'
                },
                {
		            xtype: 'radiofield',
		            name : 'color',
		            value: 'red',
		            label: '红色',
		            checked: true
		        },
		        {
		            xtype: 'radiofield',
		            name : 'color',
		            value: 'green',
		            label: '绿色'
		        },
		        {
		            xtype: 'radiofield',
		            name : 'color',
		            value: 'blue',
		            label: '蓝色'
		        },
		        {
                    xtype: 'selectfield',
                    label: '选择框',
                    options: [
                        {text: '条件1',  value: 'first'},
                        {text: '条件2', value: 'second'},
                        {text: '条件3',  value: 'third'}
                    ]
                },
                {
		            xtype: 'sliderfield',
		            label: '拖动框',
		            value: 50,
		            minValue: 0,
		            maxValue: 100
		        },spinner,
		        {
                    xtype: 'textareafield',
                    label: '区域文本',
                    maxRows: 4,
                    name: 'bio'
                },
                {
                    xtype: 'urlfield',
                    label: '网站路径',
                    name: 'url'
                }
				]
			}
			
			
			]
		}
		)
		formPanel.add(
		{
			xtype:"toolbar",
			dock:"bottom",
			layout:
			{
				pack:"center"
			},
			items:[
			{
				xtype:"button",
				text:"填写数据",
				handler:function()
				{
					formPanel.setValues(
					{
						name:"陈乃共",
						email:"[e-mail]",
						password:"123"
					}
					)
				}
			},
			{
				xtype:"button",
				text:"获取数据",
				handler:function()
				{
					Ext.Msg.alert("hah",JSON.stringify(formPanel.getValues(),null,2));
				}
			},
			{
				xtype:"button",
				text:"清空数据",
				handler:function()
				{
					formPanel.reset();
				}
			}
			]
		}
		)
		Ext.Viewport.add(formPanel);
		
		
	}
}
)

 呵呵，创建组件的写法都很简单的。具体另外要加入的属性可查看官方提供的api文档。

评论

1 楼 zuoFM99 2013-04-12  

Ext.form.Panel，能不能添加背景图片？
style:background:url(../img/login.png);只能在Ext.Panel的组件显示