项目开发中遇到的extjs常见问题

  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 转：http://blog.163.com/chenkaiemail_01/blog/static/25504598200911112819279