原文链接: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文档。
分享到:
相关推荐
NULL 博文链接:https://chennaigong.iteye.com/blog/1542268
sencha-touch-2.1.0-gpl.zip 官网下载的,欢迎下载
SenchaSDKTools-2.0.0-Beta-windows
sencha-touch-2.3.1-gpl.zip
SenchaSDKTools-2.0.0-beta3-windows
sencha touch2移动开发框架,ajax获取数据
sencha-touch-2.0.0-commercial
Sencha Touch2发布.pdf
SenchaSDKTools-1.2.3 SenchaSDKTools SenchaSDKTools-1.2.3-windows-installer SenchaTools Extjs4.0 SDK Tools 用来压缩打包部署Extjs4.0应用
sencha-touch-2.0.0-commercial
sencha-touch-2.0.0-pr1.zip
SenchaSDKTools-2.0.0-beta3进行js文件打包工具,SenchaSDKTools-2.0.0-beta3安装后可以将编辑好的js文件进行压缩打包。
sencha-touch-2.1.0-gpl
sencha-touch-2-b3
清晰文字版sencha touch2 up and running
sencha-touch2 api,对于开发者有所帮助
Sencha SDK Tools-2.0.0-beta3-windows.exe
sencha-touch-2.0.1-gpl.zip
SenchaArchitect 4(5-4)