项目开发中遇到的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
时间: 2024-10-10 21:19:36

项目开发中遇到的extjs常见问题的相关文章

项目开发中使用并发模型常见问题的整理与思考

需求: 数量不定,会定期更新数据,且数据量大的一堆数据,需要在短时间内调用某个接口获取到所有的数据,随后根据返回的json键值进行分类处理. 需求如上,初步分析,我们必然会用到多线程来做,即开一定数量的线程去调用接口获取数据,随后处理返回的json数据,这一套我们需要分开来做,调用接口获取数据我们可以看成是生产者,而处理返回的数据,将其分类就可以看作是消费者.那么,现在我们要来思考下采用这套模型可能会产生的问题.首先,如果生产者生产的数据的速度小于消费者消费的速度,那么此时,我们就需要挂起消费者

项目开发中常用的PHP函数

日期操作 为了便于存储.比较和传递,我们通常需要使用strtotime()函数将日期转换成UNIX时间戳,只有在显示给用户看的时候才使用date()函数将日期转换成常用的时间格式. strtotime()  函数将任何英文文本的日期时间描述解析为 Unix 时间戳 eg: <?php echo(strtotime("now")); echo(strtotime("3 October 2005")); echo(strtotime("+5 hours&

逆向思维在项目开发中真的很重要

最近一直和我的小组开发一个投资类型的网站,网站的整体已经完成得差不多了,客户今天突然提出了一个要求,希望能够在所有人退出当前聊天大厅后,后面进入的人不能够看到之前用户的聊天记录(原来是可以看到的).由于聊天室代码是别人写的,且基本算木有注释,也木有相关的文档.研究源码太耗时间了,由于聊天数据比较小,聊天室窗口是从messages表中读取的数据,所以打算当用户退出时,执行某一机制将Ajax_chat_messages表中对应聊天室的数据copy到一个新的Chat_messages表中,同时清除Aj

在复杂的项目开发中使用结对编程

在复杂的项目开发中使用结对编程 卢占辉译 在开发软件项目时,不仅写出相应功能的模块很重要:确保写出的模块的易维护性(bug 修复,代码重构)也同样重要. 主打互联网技术和门户网站的Perpetuum 手机公司曾开展了一个长期的软件项目,以研制出一套基于web的内容管理软件.Perpetuum公司的许多开发者都参与了这个项目.项目中大部分复杂的模块都是完全靠个人开发的(非多人协作完成).维护这些模块(即非多人协作完成的模块)非常困难.因为开发某一模块的人还需要开发新的模块或者维护另一既有模块,这需

SSH项目开发中,将jsp页面放在WEB-INF的原因解析

 在一些安全型要求比较高的项目开发中,我们经常看到jsp页面都被放在WEB-INF下面了.这是出于对安全性的考虑, 是为了代码的安全.这样实现起来虽然麻烦了点,而且页面跳转很不方便.但是整个项目的安全性就提高上去了!所 以还是建议在一些安全性要求比较高的项目里使用这种做法! 这是我写的一个例子,我就是将所有的JSP页面都放在WEB-INF下面,然后按照模块进行分配,course文件夹就是放和 课程信息管理相关的JSP页面.假如我们输入https://localhost:8080/项目名称/p

项目开发中db设计

项目开发中db设计 0.根据原型分析出数据的由来和数据间的关系(实体关系); 1.提取字段,通过powerDesigner设计表; 2.先不加约束,先只建立数据上的单向关联,有需要时在建立双向关联或中间表;3.也可以先建立外键关系,最后删除外键关系;(方便查看表的关系);4.对实体对象通常会补充的字段:     id         主键    entity        关联实体/自己    isDelete varchar(1)  Null    #是否删除    CreateEmpId v

项目开发中对设计模式的思考

前言: 做项目的时候经常会这样的体会:我的代码实现需求了,代码重用性也可以.由于前期需求分析不彻底,只考虑到一种情况,做出来的东西给用户测试的时候,发现又需要改动,这个时候又会觉得前期的设计太过复杂,改动也比较麻烦.当然问题的根本原因是需求分析不彻底,或者对业务敏感度不够.面向对象的封装特性的核心是封装变化点,由于没有察觉到业务变化点,也就无法封装变化点.基于这个问题,我总结的方法是(1)多考虑用户的潜在需求 (2)无法感知用户潜在需求的情况下,代码设计尽量简单,不要做过多设计和封装,在重构的时

项目开发中自定义字段设计原则

在开发系统过程中,做到自定义字段策略设置,目前这种功能是很多系统的标准配置,这样子可以简化后续增加字段的难度,并对自定义字段做管理. 自定义字段功能要注意到以下几点: 1.批量规划好要自定义字段的数据表.2.对自定义字段存放的表字典表做设计3.对自定义字段做不同的属性设计4.自定义字段的扩展设计 1.明确是哪个表需要自定义字段.如果是开发一套易用的系统,做开发的时候对用到的主表做统一的自定义字段设计.这样子方便在以后的开发应用中直接操作自定义功能就能增加字段.很多程序员在初写程序的时候,增加字段

记录在一次前后端分离的项目开发中遇到的坑

问题如下图: 在一次实际的项目开发中,我负责前端开发,使用的是vue+axios,后台使用的是php,由于我们的开发环境处于不同的域名和端口下, 所以出现了跨域问题,当然php服务端 可以直接解决这个问题,但是后端设置之后,前端每次都会先发出options请求,然后再post请求, 这说白了,就是每个接口请求两次.我们来分析下原因: 出于安全考虑,并不是所有域名访问后端服务都可以.其实在正式跨域之前,浏览器会根据需要发起一次预检(也就是option请求),用来让服务端返回允许的方法(如get.p