日期:2014-05-16  浏览次数:20340 次

ExtJS项目 知识点终结(1)

最近的一个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 (