1 重要按钮配置项 handler: renderTo:
2
3 取得控件及其值
4 var memo = form.findById('memo');//取得输入控件
5 alert(memo.getValue());//取得控件值
6
7 NumberField控件
8 整数，小数，数字限制，值范围限制
9
10 new Ext.form.NumberField({
11 fieldLabel:'整数',
12 allowDecimals : false,//不允许输入小数
13 allowNegative : false,//不允许输入负数
14 nanText :'请输入有效的整数',//无效数字提示
15 }),
16 new Ext.form.NumberField({
17 fieldLabel:'小数',
18 decimalPrecision : 2,//精确到小数点后两位
19 allowDecimals : true,//允许输入小数
20 nanText :'请输入有效的小数',//无效数字提示
21 allowNegative :false//允许输入负数
22 }),
23 new Ext.form.NumberField({
24 fieldLabel:'数字限制',
25 baseChars :'12345'//输入数字范围
26 }),
27 new Ext.form.NumberField({
28 fieldLabel:'数值限制',
29 maxValue : 100,//最大值
30 minValue : 50//最小值
31 })
32
33 TextArea 控件
34
35 Radio或Checkbox用法 box类
36
37 new Ext.form.Radio({
38 name : 'sex',//名字相同的单选框会作为一组
39 fieldLabel:'性别',
40 boxLabel : '男'
41 }),
42 new Ext.form.Radio({
43 name : 'sex',//名字相同的单选框会作为一组
44 fieldLabel:'性别',
45 boxLabel : '女'
46 }),
47
48 在一排
49 new Ext.form.Radio({
50 name : 'sex',//名字相同的单选框会作为一组
51 itemCls:'float-left',//向左浮动
52 clearCls:'allow-float',//允许浮动
53 fieldLabel:'性别',
54 boxLabel : '男'
55 }),
56 new Ext.form.Radio({
57 name : 'sex',//名字相同的单选框会作为一组
58 clearCls:'stop-float',//阻止浮动
59 hideLabel:true, //横排后隐藏标签
60 boxLabel : '女'
61 }),
62
63 new Ext.form.Checkbox({
64 name : 'swim',
65 fieldLabel:'爱好',
66 boxLabel : '游泳'
67 }),
68 在一排
69 new Ext.form.Checkbox({
70 name : 'swim',
71 itemCls:'float-left',//向左浮动
72 clearCls:'allow-float',//允许浮动
73 fieldLabel:'爱好',
74 boxLabel : '游泳'
75 }),
76 new Ext.form.Checkbox({
77 name : 'walk',
78 clearCls:'stop-float',//允许浮动
79 hideLabel:true, //横排后隐藏标签
80 boxLabel : '散步'
81 })
82
83
84
85 TriggerField （很像一个默认combobox）
86 new Ext.form.TriggerField({
87 id:'memo',
88 fieldLabel:'触发字段',
89 hideTrigger : false,
90 onTriggerClick : function(e){
91
92 }
93 })
94
95 combobox下拉菜单控件
96 1.本地模式
97
98 本地数据源：
99 数据源的定义：
100 var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源
101 fields: ['province', 'post'],
102 data : [['北京','100000'],['通县','101100'],['昌平','102200'],
103 ['大兴','102600'],['密云','101500'],['延庆','102100'],
104 ['顺义','101300'],['怀柔','101400']]
105 });
106
107 new Ext.form.ComboBox({
108 id:'post',
109 fieldLabel:'邮政编码',
110 triggerAction: 'all',//单击触发按钮显示全部数据
111 store : store,//设置数据源
112 displayField:'province',//定义要显示的字段
113 valueField:'post',//定义值字段
114 mode: 'local',//本地模式
115 forceSelection : true,//要求输入值必须在列表中存在
116 resizable : true,//允许改变下拉列表的大小
117 typeAhead : true,//允许自动选择匹配的剩余部分文本
118 value:'102600',//默认选择大兴
119 handleHeight : 10//下拉列表中拖动手柄的高度
120 })
121 2.远程模式
122 远程数据源
123 var store = new Ext.data.SimpleStore({
124 proxy : new Ext.data.HttpProxy({//读取远程数据的代理
125 url : 'bookSearchServer.jsp'//远程地址
126 }),
127 fields : ['bookName']
128 });
129
130 new Ext.form.ComboBox({
131 id:'book',
132 allQuery:'allbook',//查询全部信息的查询字符串
133 loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
134 minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量
135 queryDelay : 300,//查询延迟时间
136 queryParam : 'searchbook',//查询的名字
137 fieldLabel:'书籍列表',
138 triggerAction: 'all',//单击触发按钮显示全部数据
139 store : store,//设置数据源
140 displayField:'bookName',//定义要显示的字段
141 mode: 'remote'//远程模式,
142 })
143 远程json数据源
144 var store = new Ext.data.JsonStore({
145 url : 'bookSearchServerPage.jsp',//远程地址
146 totalProperty : 'totalNum',
147 root : 'books',
148 fields : ['bookName']
149 });
150
151 分页式组合框
152 new Ext.form.ComboBox({
153 id:'book',
154 fieldLabel:'书籍列表',
155 store : store,//设置数据源
156 allQuery:'allbook',//查询全部信息的查询字符串
157 triggerAction: 'all',//单击触发按钮显示全部数据
158 listWidth : 230,//指定列表宽度
159 editable : false,//禁止编辑
160 loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
161 displayField:'bookName',//定义要显示的字段
162 mode: 'remote',//远程模式
163 pageSize : 3//分页大小
164 })
165
166
167 转select 为 combobox
168 new Ext.form.ComboBox({
169 name:'level',
170 fieldLabel:'职称等级',
171 lazyRender : true,
172 triggerAction: 'all',//单击触发按钮显示全部数据
173 transform : 'levelName'
174 })
175 <SELECT ID="levelName">
176 <OPTION VALUE="1">高级工程师</OPTION>
177 <OPTION VALUE="2">中级工程师</OPTION>
178 <OPTION VALUE="3" SELECTED>初级工程师</OPTION>
179 <OPTION VALUE="4">高级经济师</OPTION>
180 <OPTION VALUE="5">中级经济师</OPTION>
181 <OPTION VALUE="6">初级经济师</OPTION>
182 </SELECT>
183
184
185 TimeField 控件
186 new Ext.form.TimeField({
187 id:'time',
188 width : 150,
189 maxValue : '18:00',//最大时间
190 maxText : '所选时间应小于{0}',//大于最大时间的提示信息
191 minValue : '10:00',//最小时间
192 minText : '所选时间应大于{0}',//小于最小时间的提示信息
193 maxHeight : 70,//下拉列表的最大高度
194 increment : 60,//时间间隔为60分钟
195 format : 'G时i分s秒',//G标示为24时计时法
196 invalidText :'时间格式无效',
197 fieldLabel:'时间选择框'
198 })
199
200
201 DateField 控件
202 new Ext.form.DateField({
203 id:'date',
204 format:'Y年m月d日',//显示日期的格式
205 maxValue :'12/31/2008',//允许选择的最大日期
206 minValue :'01/01/2008',//允许选择的最小日期
207 disabledDates : ["2008年03月12日"],//禁止选择2008年03月12日
208 disabledDatesText :'禁止选择该日期',
209 disabledDays : [0,6],//禁止选择星期日和星期六
210 disabledDaysText : '禁止选择该日期',
211 width : 150,
212 fieldLabel:'日期选择框'
213 })
214
215 Hidden 控件
216
217 new Ext.form.Hidden({//隐藏域
218 name:'age',
219 width : 150,
220 fieldLabel:'年龄'
221 }),
222
223
224 FieldSet控件相当于groupBox
225 new Ext.form.FieldSet({
226 title:'产品信息',
227 labelSeparator :'：',//分隔符
228 items:[
229 new Ext.form.TextField({
230 fieldLabel:'产地'
231 }),
232 new Ext.form.NumberField({
233 fieldLabel:'售价'
234 })
235 ]
236 }),
237
238 TextField控件
239 vtype 输入格式属性应用
240 new Ext.form.TextField({
241 fieldLabel:'电子邮件',
242 width : 170,
243 vtype:'email'
244 }),
245 new Ext.form.TextField({
246 fieldLabel:'网址',
247 width : 170,
248 vtype:'url'
249 }),
250 new Ext.form.TextField({
251 fieldLabel:'字母',
252 width : 170,
253 vtype:'alpha'
254 }),
255 new Ext.form.TextField({
256 fieldLabel:'字母和数字',
257 width : 170,
258 vtype:'alphanum'
259 })
