Sencha Touch 2 学习笔记(三)----Form表单容器及其子组件

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

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

view sourceprint?

1.

"Ext.form.Panel"

,

2.

{

3.

fullscreen:

true

,

4.

items:[

5.

{}

6.

]

7.

})

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

view sourceprint?

001.

Ext.application(

002.

{

003.

name:

"sencha"

,

004.

launch:

function

()

005.

{

006.

var

spinner = Ext.create(

'Ext.field.Spinner'

, {

007.

label:

'步骤加1'

,

008.

minValue: 0,

009.

maxValue: 10,

010.

increment: 2,

011.

cycle:

true

012.

});

013.

var

formPanel=Ext.create(

014.

"Ext.form.Panel"

,

015.

{

016.

fullscreen:

true

,

017.

items:[

018.

{

019.

xtype:

"fieldset"

,

020.

items:[

021.

{

022.

xtype:

"textfield"

,

023.

name:

"name"

,

024.

label:

"姓名"

025.

},

026.

{

027.

xtype:

"emailfield"

,

028.

name:

"email"

,

029.

label:

"邮箱"

030.

},

031.

{

032.

xtype:

"passwordfield"

,

033.

name:

"password"

,

034.

label:

"密码"

035.

},

036.

{

037.

xtype:

'numberfield'

,

038.

label:

'数字'

,

039.

minValue: 18,

040.

maxValue: 150,

041.

name:

'age'

042.

},

043.

{

044.

xtype:

'radiofield'

,

045.

name :

'color'

,

046.

value:

'red'

,

047.

label:

'红色'

,

048.

checked:

true

049.

},

050.

{

051.

xtype:

'radiofield'

,

052.

name :

'color'

,

053.

value:

'green'

,

054.

label:

'绿色'

055.

},

056.

{

057.

xtype:

'radiofield'

,

058.

name :

'color'

,

059.

value:

'blue'

,

060.

label:

'蓝色'

061.

},

062.

{

063.

xtype:

'selectfield'

,

064.

label:

'选择框'

,

065.

options: [

066.

{text:

'条件1'

,  value:

'first'

},

067.

{text:

'条件2'

, value:

'second'

},

068.

{text:

'条件3'

,  value:

'third'

}

069.

]

070.

},

071.

{

072.

xtype:

'sliderfield'

,

073.

label:

'拖动框'

,

074.

value: 50,

075.

minValue: 0,

076.

maxValue: 100

077.

},spinner,

078.

{

079.

xtype:

'textareafield'

,

080.

label:

'区域文本'

,

081.

maxRows: 4,

082.

name:

'bio'

083.

},

084.

{

085.

xtype:

'urlfield'

,

086.

label:

'网站路径'

,

087.

name:

'url'

088.

}

089.

]

090.

}

091.

092.

093.

]

094.

}

095.

)

096.

formPanel.add(

097.

{

098.

xtype:

"toolbar"

,

099.

dock:

"bottom"

,

100.

layout:

101.

{

102.

pack:

"center"

103.

},

104.

items:[

105.

{

106.

xtype:

"button"

,

107.

text:

"填写数据"

,

108.

handler:

function

()

109.

{

110.

formPanel.setValues(

111.

{

112.

name:

"陈乃共"

,

113.

email:

"123@11.com"

,

114.

password:

"123"

115.

}

116.

)

117.

}

118.

},

119.

{

120.

xtype:

"button"

,

121.

text:

"获取数据"

,

122.

handler:

function

()

123.

{

124.

Ext.Msg.alert(

"hah"

,JSON.stringify(formPanel.getValues(),

null

,2));

125.

}

126.

},

127.

{

128.

xtype:

"button"

,

129.

text:

"清空数据"

,

130.

handler:

function

()

131.

{

132.

formPanel.reset();

133.

}

134.

}

135.

]

136.

}

137.

)

138.

Ext.Viewport.add(formPanel);

139.

140.

141.

}

142.

}

143.

)

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