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. Combobobobox 모호 찾기 해결 (ExtJS 기본 Combobobobox의 입력 필터는 첫 번째 문자에서 시작되었습니다. 우리는 일반적으로 모호 일치를 지원할 수 있어야 하기 때문에 원본 코드를 수정할 수밖에 없습니다.)

// 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 (!this.lazyInit) {
			this.initList();
		} else {
			this.on('focus', this.initList, this, {
						single : true
					});
		}
	}
});  

 
4. Grid 중국어 정렬 혼란 해결 - 클라이언트 정렬

		// -- 
		Ext.data.Store.prototype.applySort = function() {
		    if (this.sortInfo && !this.remoteSort) {
		        var s = this.sortInfo, f = s.field;
		        var st = this.fields.get(f).sortType;
		        var fn = function(r1, r2) {
		            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
		            if (typeof(v1) == "string") {
		                return v1.localeCompare(v2);
		            }
		            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
		        };
        		
		        this.data.sort(s.direction, fn);
		        if(this.snapshot && this.snapshot != this.data) {
		            this.snapshot.sort(s.direction, fn);
		        }
        
		        for(var i=0;i<tempArray.length;i++){
		        		this.data.add(tempArray[i]);
		        }
		        if(this.snapshot&&tempArray.length>0){
		        	for(var i=0;i<tempArray.length;i++){
		        		this.data.add(tempArray[i]);
		        		this.snapshot.add(tempArray[i]);
		        	}
		        }
			}
		};

 
5, 합계행 후 페이지 나누기 도구 모음의 계수 오류 처리

Ext.PagingToolbar.prototype.updateInfo=function(){
 if(this.displayItem){
	 var count = this.store.getCount();
	 if(this.store.sumcol){
	 	if(this.cursor+count==this.store.getTotalCount()+2){
	 		count-=2;
	 	}else{
	 		count-=1;
	 	}
	 }
	 var msg = count == 0 ?
	 this.emptyMsg :
	 String.format(
		 this.displayMsg,
		 this.cursor+1, this.cursor+count, this.store.getTotalCount()
	 );
	 this.displayItem.setText(msg);
 }
};

6. aax 요청 시간 기본 600초 설정

Ext.data.Connection.prototype.timeout='600000';

 
7, onFocus 방법을 다시 쓰고 TextFieldreadOnly가true일 때 TextField가 초점을 얻지 못함

Ext.override(Ext.form.TextField, {
	onFocus : function(){
	Ext.form.TextField.superclass.onFocus.call(this);
		if(this.readOnly){
				this.blur();
		}
	}
});

 
8. Ajax 요청 세션 시간 초과 해결

Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);   
function checkUserSessionStatus(conn,response,options){
	var h=response.getAllResponseHeaders();
    if(h.indexOf("reload")!=-1){// ExtJS ， 
    	Ext.MessageBox.alert(Ext.MessageBox.buttonMsg.t,Ext.MessageBox.buttonMsg.s,function(){
    	var plocation=parent.window.location;
			parent.window.location.href=location.protocol+"//"+location.host+plocation.pathname.match(/\/[a-z_0-9A-Z]{1,}\//g)[0];		    		
    	});
    }
}

Action에는 모든 요청을 덮어쓰는 차단기에 쓰는 것이 좋습니다.

if(session.get("user")==null){
	try {
		response.setHeader("reload", "timeout");
	} catch (Exception e) { 
		e.printStackTrace();
	}
}

 
 
9. Ext의 grid 줄 선택 스타일을 다시 작성하여 현재 줄을 더욱 뚜렷하게 보입니다

.x-grid3-row-selected .x-grid3-cell-inner {
	/*border:1px dotted;*/
	font-weight: bold;
	color:'<%=lineColor%>'
}

 
 
 
계속...