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

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

?

?

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

?

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

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

?

?

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:"123@11.com",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);}})