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 MessageBox100 101 1.       点击确认/取消后执行function102 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 TabPanel116 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 gridPanel132 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的加载路径变了，要通过以下方式设置新的url148 149       this.store.proxy =new Ext.data.HttpProxy( {url : newURL } );150 151 FormPanel152 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 =http://www.mamicode.com/ 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,  //强制只能选择列表中的值 ，解决3230 231 mode : ‘local‘,  //从客户端加载数据232 233 typeAhead : true,  //解决4234 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 :  save366 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 : true394 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 : false414 415                  }, {416 417                       xtype : ‘radio‘,418 419                       hideLabel : true,420 421                       name : ‘1‘,422 423                       boxLabel : ‘-优惠卡支付‘,424 425                       inputValue : ‘3‘,426 427                       checked : false428 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’) 获取某一个控件，首先必须指定控件的id456 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  和 position474 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