原文链接: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:"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);
}
}
)
呵呵,创建组件的写法都很简单的。具体另外要加入的属性可查看官方提供的api文档。