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

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

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

view source print ?

1. "Ext.form.Panel",

2. {

3. fullscreen:true,

4. items:[

5. {}

6. ]

7. })

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

view source print ?

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文档。