日期:2014-05-16 浏览次数:20348 次
最近的一个ExtJS(version:3.2)的项目中学习和利用了ExtJS,现在罗列如下以备忘:
?
1、适用于TextField、NumberField 添加一个 sideText 标签显示在右侧如必填项的 * 号等标记
/**适用于TextField、NumberField 添加一个 sideText 标签显示在右侧如必填项的 * 号等*/ Ext.override(Ext.form.TextField, { sideText : '', onRender : function(ct, position) { Ext.form.TextField.superclass.onRender.call(this, ct, position); if (this.sideText != '' && !this.triggerAction) { this.sideEl = ct.createChild({ tag: 'div', style:'position:absolute;left:'+(this.x+this.width)+';top:'+(this.y)+';padding-left:2px;display:inline-block;display:inline;', html: this.sideText }); } if(this.readOnly){//为只读的text加上特定的样式--background-image:url('')去掉本身的背景图片 /*边框:b5b8c8 背景色:dfe8f6 background-color:#DDDDDD; border:1px*/ if(this.xtype=='numberfield'){ if(this.style){ this.style+=" text-align:right; background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')"; }else{ this.style=" text-align:right; background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')"; } } else{ if(this.style){ this.style+="background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')"; }else{ this.style="background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')"; } } } if(this.display){//用于显示的样式,只有下边的border this.style="border-style: none none groove none;background-image:url('');"; this.readOnly=true; if(this.ext_style){ this.style+=this.ext_style; } } } });
??
2、解决combobox模糊查找(ExtJS 默认的Combobox的输入过滤是从第一个字符开始的,我们一般需要它能够支持模糊匹配,现在就只好又累修改源码了)
//解决combobox模糊查找 Ext.override(Ext.form.ComboBox, { doQuery : function(q, forceAll){ q = Ext.isEmpty(q) ? '' : q; var qe = { query: q, forceAll: forceAll, combo: this, cancel:false }; if(this.fireEvent('beforequery', qe)===false || qe.cancel){ return false; } q = qe.query; forceAll = qe.forceAll; if(forceAll === true || (q.length >= this.minChars)){ if(this.lastQuery !== q){ this.lastQuery = q; if(this.mode == 'local'){ this.selectedIndex = -1; if(forceAll){ this.store.clearFilter(); }else{ this.store.filter(this.displayField, q ,true); } this.onLoad(); }else{ this.store.baseParams[this.queryParam] = q; this.store.load({ params: this.getParams(q) }); this.expand(); } }else{ this.selectedIndex = -1; this.onLoad(); } } } });
?
3、适用于ComboBox? 添加一个 sideText 标签显示在右侧如必填项的 * 号
?
/**适用于ComboBox 添加一个 sideText 标签显示在右侧如必填项的 * 号等*/ Ext.override(Ext.form.ComboBox, { sideText : '', onRender : function(ct, position) { Ext.form.ComboBox.superclass.onRender.call(this, ct, position); if (this.sideText != '') { //this.sideEl = ct.first('div').createChild({ this.sideEl = ct.createChild({ tag: 'div', style:'position:absolute;left:'+(this.x+this.width)+';top:'+(this.y)+';z-index:900;padding-left:2px;display:inline-block;display:inline;', html: this.sideText }); } if (this.hiddenName) { this.hiddenField = this.el.insertSibling({ tag : 'input', type : 'hidden', name : this.hiddenName, id : (this.hiddenId || this.hiddenName) }, 'before', true); // prevent input submission this.el.dom.removeAttribute('name'); } if (Ext.isGecko) { this.el.dom.setAttribute('autocomplete', 'off'); } if (