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 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