首页 / EXTJS / 项目开发中遇到的extjs常见问题
项目开发中遇到的extjs常见问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了项目开发中遇到的extjs常见问题,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含8111字,纯文字阅读大概需要12分钟。
内容图文
1 事件触发机制 2 3 l 给某一个控件添加事件。 4 5 obj.addEvents( {search : true }); 6 7l 给某一个事件添加处理函数 8 9n 给一个对象或变量添加监听及对应得处理,可以在创建时,通过属性listener添加。 10 11 n 或者通过 obj.on(‘event’,function(){}) 12 13 n 或者通过obj.addListener(“event”,function) 14 15 16 17l 出发一个事件,params是要传给事件对应的处理函数的参数 18 19Obj.fireEvent(‘eventName’,params) 20 21工具栏 22 23获取工具栏元素方法 24 25var items = this.preview.topToolbar.items; 26 27 items.get(‘tab‘).enable(); 28 29 items.get(‘win‘).enable(); 30 31Panel及子类 32 33ViewPort 34 35Viewpor代表整个浏览器的显示区域,会被渲染到html body中,并会随着浏览器显示区域大小自动改变。 36 37Window 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 81winObj.buttons 82 83 disableButton:function(){ 84 85for(i=0;i<this.buttons.length;i++) 86 87this.buttons[i].disable();//hide() 88 89 }, 90 91 enableButton:function(){ 92 93for(i=0;i<this.buttons.length;i++) 94 95this.buttons[i].enable()//show(); 96 97 } 98 99MessageBox 100101 1. 点击确认/取消后执行function 102103 Ext.MessageBox.alert/confirm ("信息",msg, 104105function(button, text) { 106107//当confirm时 判断按钮108109if (button == "yes") 110111//TODO something 112113 }, this); 114115TabPanel 116117当页签改变的时候出一个处理函数 118119 Ext.getCmp(‘tabpanel‘).on(‘tabchange‘,this.tabChange,this); 120121122123获取某一个页签,在页签中的给id 属性,通过id获取 124125 Ext.getCmp(‘tabpanel‘).getItem(‘id‘); 126127128129130131gridPanel 132133l gridPanel 中gridView是控制grid的展现,通过viewConfig用来配置属性,其中 134135 autoFill : true,forceFit : true 比较重要 136137l 控制列菜单的显示与否 138139 enableHdMenu:false140141l 对具有翻页功能的grid,当通过某一个参数获取store数据时,传输参数的方法必须是通过get方式,即在url后面追加或许通过baseParams传递。不能通过params传参。 142143l Store.reload 方法用于加载当前页的数据 store.load重新加载数据返回第一页。 144145l 点击翻页按钮时,会调用store.load方法,并传把start和limit封装作为参数传进去,因此如果对查询结果集进行翻页得时候,要把查询条件要写到baseParams或追加到url中,以使翻页后的数据也是符合查询条件的。 146147l 当store的加载路径变了,要通过以下方式设置新的url 148149this.store.proxy =new Ext.data.HttpProxy( {url : newURL } ); 150151FormPanel 152153数据加载和提交注意事项 154155l 数据加载时,首先要配置reader,并且从后台返回的数据符合解析器的结构,一般跟后台的封装有关。目前所有数据均已list 或 page 形式返回。 156157 l form.load()方法,当数据加载成功或者失败的时候,都会调用reader解析结果json数据,因此json数据中必须有root(一般为result)指定的结果集。属性successProperty:"success" 用来指定form执行load 成功后要回掉的函数名,默认情况下没有指定。 158159l 数据加载或提交后,form将回掉success failure函数,submit 和load方法在回掉的处理稍微不同。 160161 Success/failure: function(form, action) { 162163var jsonData = Ext.util.JSON.decode(action.response.responseText); 164165if (jsonData) //dosomething}166167} 168169检查是否有脏数据 170171 formPanel.form. isDirty() 172173一些重要的事件 174175 当表单提交或加载成功(失败)后,触发以下事件 176177 form.form.on(‘actioncomplete‘, handler, this); 178179 form.form.on(‘actionfailed‘, handler, this); 180181182183Combo控件 184185Combo控件通过store加载数据时会出现的问题 186187 1. 当设emtyText时,如果没有选中选项则会把“请选择…”保存到数据库中 188189 2. 当设readOnly:true 时,一旦选择了某一个选项,则会不到空值,即不选任何值 190191 3. 但是当不只读时,用户又可以自己随便输入值,这时这些值没有对应得key值在数据库中 192193 4. 输入“中”时,下拉框中出现以“中”打头的选项 194195 5. 往数据库传送key而不传value ,即下拉框中显示“中国”,并选中时,提交表单传送“中国”对应得key值 而不是“中国” 196197198199下面为解决方法 200201{ 202203 xtype : ‘combo‘, 204205 name : ‘clearingid‘, 206207 fieldLabel : ‘付款类型‘, 208209 hiddenName : ‘clearingid‘, //隐藏字段,即往后台传输对应得字段,combo会把 210211 valueField的值存到这个隐藏字段中 212213214215 store : pay_type_store,// 所要显示的下拉列表的数据对象216217 valueField : "codeVal1", //store的值域 218219 displayField : "codeName", //store显示域 “中国”220221222223 anchor : ‘100%‘, 224225226227 emptyText : ‘请选择...‘, 228229 forceSelection : true, //强制只能选择列表中的值 ,解决3230231 mode : ‘local‘, //从客户端加载数据232233 typeAhead : true, //解决4234235listeners : { 236237 expand : function(combo) { 238239combo.reset(); 240241} 242243} 244245} 246247有两个trigger的控件 248249自定义这类控件的方法 250251 NewTrigger=Ext.extend(Ext.form.TwinTriggerField, { 252253 initComponent : function() { 254255 NewAddTriggerField.superclass.initComponent.call(this); 256257 }, 258259 trigger1Class : ‘x-form-add-trigger‘, //第一个trigger的样式260261 trigger2Class : ‘x-form-list-trigger‘,//第二个trigger的样式262263264265 onTrigger1Click : function() { //处理函数},266267 onTrigger2Click function() {//处理函数 }268269270271//要重写这两个方法以便于后台交互,可以采用combo的处理机制272273 setValue : function(), 274275 getValue : function() 276277} 278279); 280281282283Radio控件 284285Radio控件的布局 286287 1. 方法一: 288289先在form里add一个 290291new Ext.form.Radio({ 292293 fieldLabel : ‘Radio‘, 294295 name : ‘sex‘, 296297 boxLabel : ‘boy‘, 298299 id : ‘sex-boy‘, 300301 allowBlank : false, 302303 value : ‘boy‘ 304305 }) 306307然后在当前form render()后添加下面代码 308309 Ext.DomHelper.insertAfter(Ext.DomQuery.selectNode(‘label:contains(boy)‘), { 310311 tag: ‘input‘, 312313 id: ‘sex-girl‘, 314315 type: ‘radio‘, 316317 name: ‘sex‘, 318319 ‘class‘: ‘x-form-radio x-form-field‘ 320321 }, false); 322323 Ext.DomHelper.insertAfter(Ext.get(‘sex-girl‘), { 324325 tag: ‘label‘, 326327 ‘class‘: ‘x-form-cb-label‘, 328329 ‘for‘: ‘sex2‘, 330331 html: ‘girl‘ 332333 }, false); 334335 2. 方法二: 336337var radioPanel = new Ext.form.FormPanel({ 338339 labelWidth : 60, 340341 labelAlign : ‘right‘, 342343 frame : true, 344345 maskDisabled : false, 346347 waitMsgTarget : true, 348349 autoScroll : true, 350351 bodyStyle : ‘padding:5px 5px 5px‘, 352353 buttonAlign : ‘center‘, 354355 width: 400, 356357 buttons : [ 358359 { 360361 text : ‘save‘, 362363 scope : this, 364365 handler : save 366367 } ], 368369 items : [{ 370371 layout : ‘column‘, 372373 defaults:{autoWidth:true}, 374375 items : [ 376377 { 378379 layout : ‘form‘, 380381 items : [{ 382383 fieldLabel : ‘单选框‘, 384385 xtype : ‘radio‘, 386387 name : ‘1‘, 388389 boxLabel : ‘-优惠卡支付‘, 390391 inputValue : ‘1‘, 392393 checked : true394395396397 }] 398399 }, 400401 { 402403 xtype : ‘radio‘, 404405 hideLabel : true, 406407 name : ‘1‘, 408409 boxLabel : ‘-优惠卡支付‘, 410411 inputValue : ‘2‘, 412413 checked : false414415 }, { 416417 xtype : ‘radio‘, 418419 hideLabel : true, 420421 name : ‘1‘, 422423 boxLabel : ‘-优惠卡支付‘, 424425 inputValue : ‘3‘, 426427 checked : false428429 } 430431 ] 432433 } 434435 ] 436437 }); 438439 隐藏fieldLabel的两种方法:hideLable:true和不给fieldLabel属性并设labelSeparator:‘‘ 440441Radio控件传输数据 442443往后台提交数据前,首先通过getGroupValue获取单选框的值,这时创建的radio必须有inputValue值。 444445var v = radioPanel.form.findField(‘1‘).getGroupValue(); 446447 radioPanel.form.findField(‘1‘).setValue(v); 448449 form.form.on(‘beforeaction‘, handler, this); 450451452453Ext的一些常用函数 454455l Ext.getCmp(‘cmpid’) 获取某一个控件,首先必须指定控件的id 456457l Ext.get(‘id’) 获取某一个dom控件,该方法在fireFox里不支持 该方法等同于document.get() 458459l Ext.apply(config1,config2)把后config2的数据覆盖到config1中,并覆盖原有数据。 460461l Ext.applyIf(config1,config2)也是拷贝但是不覆盖原有数据。 462463464465IE7中formpanel串位问题 466467这个问题是由控件的布局引起。当formpanel加载完数据后,将重新局部。由于重新布局的时候采用的绝对位置,因此导致串位。解决方式重写 Element的mask方法。 468469Ext.override( Ext.Element, { 470471 mask: function( msg, msgCls ) 472473 { //元素overflow 和 position474475if(Ext.isIE7 && this.getStyle("position") == "static"){ 476477this.setStyle("overflow", "auto"); 478479this.setStyle("position", "relative"); 480481 } 482483if(!this._mask){ 484485this._mask = Ext.DomHelper.append(this.dom,{cls:"ext-el-mask"}, true); } 486487this.addClass("x-masked"); 488489this._mask.setDisplayed(true); 490491if(typeof msg == ‘string‘){ 492493if(!this._maskMsg){ 494495this._maskMsg = Ext.DomHelper.append(this.dom, 496497 cls:"ext-el-mask-msg", 498499 cn:{tag:‘div‘}}, true); 500501 } 502503var mm = this._maskMsg; 504505 mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg"; 506507 mm.dom.firstChild.innerHTML = msg; 508509 mm.setDisplayed(true); 510511 mm.center(this); 512513 } 514515if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle(‘height‘) == 516517 ‘auto‘){ 518519this._mask.setHeight(this.getHeight()); 520521 } 522523returnthis._mask; 524525 } 526527}); 528529 转:http://blog.163.com/chenkaiemail_01/blog/static/25504598200911112819279
原文:http://www.cnblogs.com/jun1019/p/4142937.html
内容总结
以上是互联网集市为您收集整理的项目开发中遇到的extjs常见问题全部内容,希望文章能够帮你解决项目开发中遇到的extjs常见问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。