1 事件触发机制
2
3 l 给某一个控件添加事件。
4
5 obj.addEvents( {search : true });
6
7 l 给某一个事件添加处理函数
8
9 n 给一个对象或变量添加监听及对应得处理，可以在创建时，通过属性listener添加。
10
11 n 或者通过 obj.on(‘event’,function(){})
12
13 n 或者通过obj.addListener(“event”,function)
14
15
16
17 l 出发一个事件，params是要传给事件对应的处理函数的参数
18
19 Obj.fireEvent(‘eventName’,params)
20
21 工具栏
22
23 获取工具栏元素方法
24
25 var items = this.preview.topToolbar.items;
26
27 items.get('tab').enable();
28
29 items.get('win').enable();
30
31 Panel及子类
32
33 ViewPort
34
35 Viewpor代表整个浏览器的显示区域，会被渲染到html body中，并会随着浏览器显示区域大小自动改变。
36
37 Window
38
39 1. 创建属性一般设置
40
41 { width : 500,
42
43 height : 300,
44
45 layout : 'fit',
46
47 constrain : true, 把窗口的显示位置限制在viewport中
48
49 constrainHeader : true,
50
51 items : this.form,
52
53 plain : true,
54
55 closeAction:’hide’
56
57 frame : true,
58
59 modal : true, 窗口显示时，把窗口以外的元素用一个样式遮盖
60
61 buttonAlign : 'center' 按钮居中
62
63 }
64
65
66
67
68
69
70
71 2. Beforeclose事件
72
73 当窗口关闭以前可以做一些操作，如检查窗口内部表单数据的改变与否
74
75 winObj.on('beforeclose', this.checkDirty, this);
76
77 3. 按钮的获取
78
79 要获取window的按钮
80
81 winObj.buttons
82
83 disableButton:function(){
84
85 for(i=0;i<this.buttons.length;i++)
86
87 this.buttons[i].disable();//hide()
88
89 },
90
91 enableButton:function(){
92
93 for(i=0;i<this.buttons.length;i++)
94
95 this.buttons[i].enable()//show();
96
97 }
98
99 MessageBox
100
101 1. 点击确认/取消后执行function
102
103 Ext.MessageBox.alert/confirm ("信息",msg,
104
105 function(button, text) {
106
107 //当confirm时 判断按钮
108
109 if (button == "yes")
110
111 //TODO something
112
113 }, this);
114
115 TabPanel
116
117 当页签改变的时候出一个处理函数
118
119 Ext.getCmp('tabpanel').on('tabchange',this.tabChange,this);
120
121
122
123 获取某一个页签，在页签中的给id 属性，通过id获取
124
125 Ext.getCmp('tabpanel').getItem('id');
126
127
128
129
130
131 gridPanel
132
133 l gridPanel 中gridView是控制grid的展现，通过viewConfig用来配置属性，其中
134
135 autoFill : true,forceFit : true 比较重要
136
137 l 控制列菜单的显示与否
138
139 enableHdMenu:false
140
141 l 对具有翻页功能的grid，当通过某一个参数获取store数据时，传输参数的方法必须是通过get方式，即在url后面追加或许通过baseParams传递。不能通过params传参。
142
143 l Store.reload 方法用于加载当前页的数据 store.load重新加载数据返回第一页。
144
145 l 点击翻页按钮时，会调用store.load方法，并传把start和limit封装作为参数传进去，因此如果对查询结果集进行翻页得时候，要把查询条件要写到baseParams或追加到url中，以使翻页后的数据也是符合查询条件的。
146
147 l 当store的加载路径变了，要通过以下方式设置新的url
148
149 this.store.proxy =new Ext.data.HttpProxy( {url : newURL } );
150
151 FormPanel
152
153 数据加载和提交注意事项
154
155 l 数据加载时，首先要配置reader，并且从后台返回的数据符合解析器的结构，一般跟后台的封装有关。目前所有数据均已list 或 page 形式返回。
156
157 l form.load()方法，当数据加载成功或者失败的时候，都会调用reader解析结果json数据，因此json数据中必须有root(一般为result)指定的结果集。属性successProperty:"success" 用来指定form执行load 成功后要回掉的函数名，默认情况下没有指定。
158
159 l 数据加载或提交后，form将回掉success failure函数，submit 和load方法在回掉的处理稍微不同。
160
161 Success/failure: function(form, action) {
162
163 var jsonData = Ext.util.JSON.decode(action.response.responseText);
164
165 if (jsonData) //dosomething}
166
167 }
168
169 检查是否有脏数据
170
171 formPanel.form. isDirty()
172
173 一些重要的事件
174
175 当表单提交或加载成功（失败）后，触发以下事件
176
177 form.form.on('actioncomplete', handler, this);
178
179 form.form.on('actionfailed', handler, this);
180
181
182
183 Combo控件
184
185 Combo控件通过store加载数据时会出现的问题
186
187 1． 当设emtyText时，如果没有选中选项则会把“请选择…”保存到数据库中
188
189 2． 当设readOnly:true 时，一旦选择了某一个选项，则会不到空值，即不选任何值
190
191 3． 但是当不只读时，用户又可以自己随便输入值，这时这些值没有对应得key值在数据库中
192
193 4． 输入“中”时，下拉框中出现以“中”打头的选项
194
195 5． 往数据库传送key而不传value ，即下拉框中显示“中国”，并选中时，提交表单传送“中国”对应得key值 而不是“中国”
196
197
198
199 下面为解决方法
200
201 {
202
203 xtype : 'combo',
204
205 name : 'clearingid',
206
207 fieldLabel : '付款类型',
208
209 hiddenName : 'clearingid', //隐藏字段，即往后台传输对应得字段，combo会把
210
211 valueField的值存到这个隐藏字段中
212
213
214
215 store : pay_type_store,// 所要显示的下拉列表的数据对象
216
217 valueField : "codeVal1", //store的值域
218
219 displayField : "codeName", //store显示域 “中国”
220
221
222
223 anchor : '100%',
224
225
226
227 emptyText : '请选择...',
228
229 forceSelection : true, //强制只能选择列表中的值 ，解决3
230
231 mode : 'local', //从客户端加载数据
232
233 typeAhead : true, //解决4
234
235 listeners : {
236
237 expand : function(combo) {
238
239 combo.reset();
240
241 }
242
243 }
244
245 }
246
247 有两个trigger的控件
248
249 自定义这类控件的方法
250
251 NewTrigger=Ext.extend(Ext.form.TwinTriggerField, {
252
253 initComponent : function() {
254
255 NewAddTriggerField.superclass.initComponent.call(this);
256
257 },
258
259 trigger1Class : 'x-form-add-trigger', //第一个trigger的样式
260
261 trigger2Class : 'x-form-list-trigger',//第二个trigger的样式
262
263
264
265 onTrigger1Click : function() { //处理函数},
266
267 onTrigger2Click function() {//处理函数 }
268
269
270
271 //要重写这两个方法以便于后台交互，可以采用combo的处理机制
272
273 setValue : function(),
274
275 getValue : function()
276
277 }
278
279 );
280
281
282
283 Radio控件
284
285 Radio控件的布局
286
287 1. 方法一：
288
289 先在form里add一个
290
291 new Ext.form.Radio({
292
293 fieldLabel : 'Radio',
294
295 name : 'sex',
296
297 boxLabel : 'boy',
298
299 id : 'sex-boy',
300
301 allowBlank : false,
302
303 value : 'boy'
304
305 })
306
307 然后在当前form render()后添加下面代码
308
309 Ext.DomHelper.insertAfter(Ext.DomQuery.selectNode('label:contains(boy)'), {
310
311 tag: 'input',
312
313 id: 'sex-girl',
314
315 type: 'radio',
316
317 name: 'sex',
318
319 'class': 'x-form-radio x-form-field'
320
321 }, false);
322
323 Ext.DomHelper.insertAfter(Ext.get('sex-girl'), {
324
325 tag: 'label',
326
327 'class': 'x-form-cb-label',
328
329 'for': 'sex2',
330
331 html: 'girl'
332
333 }, false);
334
335 2. 方法二：
336
337 var radioPanel = new Ext.form.FormPanel({
338
339 labelWidth : 60,
340
341 labelAlign : 'right',
342
343 frame : true,
344
345 maskDisabled : false,
346
347 waitMsgTarget : true,
348
349 autoScroll : true,
350
351 bodyStyle : 'padding:5px 5px 5px',
352
353 buttonAlign : 'center',
354
355 width: 400,
356
357 buttons : [
358
359 {
360
361 text : 'save',
362
363 scope : this,
364
365 handler : save
366
367 } ],
368
369 items : [{
370
371 layout : 'column',
372
373 defaults:{autoWidth:true},
374
375 items : [
376
377 {
378
379 layout : 'form',
380
381 items : [{
382
383 fieldLabel : '单选框',
384
385 xtype : 'radio',
386
387 name : '1',
388
389 boxLabel : '-优惠卡支付',
390
391 inputValue : '1',
392
393 checked : true
394
395
396
397 }]
398
399 },
400
401 {
402
403 xtype : 'radio',
404
405 hideLabel : true,
406
407 name : '1',
408
409 boxLabel : '-优惠卡支付',
410
411 inputValue : '2',
412
413 checked : false
414
415 }, {
416
417 xtype : 'radio',
418
419 hideLabel : true,
420
421 name : '1',
422
423 boxLabel : '-优惠卡支付',
424
425 inputValue : '3',
426
427 checked : false
428
429 }
430
431 ]
432
433 }
434
435 ]
436
437 });
438
439 隐藏fieldLabel的两种方法：hideLable:true和不给fieldLabel属性并设labelSeparator:''
440
441 Radio控件传输数据
442
443 往后台提交数据前，首先通过getGroupValue获取单选框的值，这时创建的radio必须有inputValue值。
444
445 var v = radioPanel.form.findField('1').getGroupValue();
446
447 radioPanel.form.findField('1').setValue(v);
448
449 form.form.on('beforeaction', handler, this);
450
451
452
453 Ext的一些常用函数
454
455 l Ext.getCmp(‘cmpid’) 获取某一个控件，首先必须指定控件的id
456
457 l Ext.get(‘id’) 获取某一个dom控件，该方法在fireFox里不支持 该方法等同于document.get()
458
459 l Ext.apply(config1,config2)把后config2的数据覆盖到config1中，并覆盖原有数据。
460
461 l Ext.applyIf(config1,config2)也是拷贝但是不覆盖原有数据。
462
463
464
465 IE7中formpanel串位问题
466
467 这个问题是由控件的布局引起。当formpanel加载完数据后，将重新局部。由于重新布局的时候采用的绝对位置，因此导致串位。解决方式重写 Element的mask方法。
468
469 Ext.override( Ext.Element, {
470
471 mask: function( msg, msgCls )
472
473 { //元素overflow 和 position
474
475 if(Ext.isIE7 && this.getStyle("position") == "static"){
476
477 this.setStyle("overflow", "auto");
478
479 this.setStyle("position", "relative");
480
481 }
482
483 if(!this._mask){
484
485 this._mask = Ext.DomHelper.append(this.dom,{cls:"ext-el-mask"}, true); }
486
487 this.addClass("x-masked");
488
489 this._mask.setDisplayed(true);
490
491 if(typeof msg == 'string'){
492
493 if(!this._maskMsg){
494
495 this._maskMsg = Ext.DomHelper.append(this.dom,
496
497 cls:"ext-el-mask-msg",
498
499 cn:{tag:'div'}}, true);
500
501 }
502
503 var mm = this._maskMsg;
504
505 mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
506
507 mm.dom.firstChild.innerHTML = msg;
508
509 mm.setDisplayed(true);
510
511 mm.center(this);
512
513 }
514
515 if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') ==
516
517 'auto'){
518
519 this._mask.setHeight(this.getHeight());
520
521 }
522
523 return this._mask;
524
525 }
526
527 });
528
529
