sencha touch2学习笔记(三)----form表单容器及其子组件
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:"[email protected]", 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文档。
相关推荐
huanghuang 2014-11-08
朱莉的乔夫 2015-03-13
Remindhh 2016-01-03
Raindan 2016-01-03
zmminer 2015-10-21
huanghuang 2014-11-08
lrlnh 2014-10-15
MegatronKings 2014-07-14
markshuai 2013-09-09
Dolphinsz 2013-08-14
hhhkhhh 2013-02-06
clayluo 2011-06-08
xueliangEmail 2016-01-26
爱技术爱生活TAO 2015-05-07
lly00 2015-03-13
胡杨林 2014-11-24
yeaperyeo 2014-09-19
Theqianduan 2014-04-09
HangMine 2014-01-23