올바른 성장과 따뜻한 나눔이 있는 넥스트리
기본적인 에러핸들링에 대해서 설명한다.
GridPanel 의 loadexception을 이용한 ErrorHandling 방법
기본
그르드 패널에서 데이타 로드시 loadexception이벤트에 대해서 설명한다.
BasicGridClass = function() {
return {
init : function() {
// 데이타 스토어 정의
this.store = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : 'basicGrid.json'
}),
sortInfo : {
field : 'price',
direction : "DESC"
},
reader : new Ext.data.JsonReader( {
root : 'testData'
}, [ {
name : 'company',
type : 'string',
mapping : 'company'
}, {
name : 'price',
type : 'float',
mapping : 'price'
}, {
name : 'change',
type : 'float',
mapping : 'change'
}, {
name : 'pctChange',
type : 'float',
mapping : 'pctChange'
}, {
name : 'lastChange',
type : 'date',
dateFormat : 'n/j h:ia',
mapping : 'lastChange'
}])
});
this.grid = new Ext.grid.GridPanel( {
store : this.store,
columns : [ {
id : 'company',
header : "Company",
width : 160,
sortable : true,
dataIndex : 'company'
}, {
header : "Price",
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex : 'price'
}, {
header : "Change",
width : 75,
sortable : true,
dataIndex : 'change'
}, {
header : "% Change",
width : 75,
sortable : true,
dataIndex : 'pctChange'
}, {
header : "Last Updated",
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'lastChange'
}],
stripeRows : true,
autoExpandColumn : 'company',
loadMask : {
msg : '데이타 로드중'
},
sm : new Ext.grid.RowSelectionModel( {
singleSelect : true
}),
view : new Ext.grid.GridView( {
forceFit : true,
enableRowBody : true,
emptyText : 'No Record found'
}),
height : 350,
width : 800,
title : '기본 그리드'
});
this.grid.render('DIV_GRID_HERE');
// this.grid.getSelectionModel().selectFirstRow();
this.store.load();
this.grid.on('rowcontextmenu', function(grid, index, e) {
alert('오른쪽 버튼 클릭');
}, this);
this.grid.on('rowclick', function(grid, index, e) {
alert('클릭');
}, this);
this.grid.on('rowdblclick', function(grid, index, e) {
alert('더블클릭');
}, this);
this.gsm = this.grid.getSelectionModel();
this.store.on('load', this.gsm.selectFirstRow, this.gsm);
this.store.on('load', function(store, records, options) {
}, this);
this.store.on('loadexception',
function(a, conn, resp) {
if (resp.status == 200) {
var jsonData = resp.responseText;
var result = (jsonData != undefined && jsonData
.trim() != "") ? Ext.decode('(' + jsonData
+ ')') : null;
if (result != null && result.code != undefined
&& result.code.trim() != ''
&& result.message != undefined) {
this.showErrorStackHandler(result);
}
}
}, this);
// 커넥션에서 문제가 일어났을 경우
this.store.proxy.getConnection()
.on(
'requestcomplete',
function(conn, resp, options) {
var jsonData = resp.responseText;
var result = (jsonData != undefined && jsonData
.trim() != "") ? Ext.decode('('
+ jsonData + ')') : null;
if (result != null && result.code != undefined
&& result.code.trim() != ''
&& result.message != undefined) {
this.showErrorStackHandler(result);
}
}, this);
this.store.on('load', function(store, records, opt) {
});
},
showErrorStackHandler : function(result) {
var code = (result.code != undefined) ? result.code : '';
var mesg = (result.message != undefined) ? result.message : '';
var insNm = (result.instanceName != undefined)
? result.instanceName
: '';
var errStack = (result.stack != undefined) ? result.stack : '';
var occDate = (result.occurDateTime != undefined)
? result.occurDateTime
: '';
var markup = "<div><ul>" + "<li>에러코드 : " + code + "</li>"
+ "<li>에러메세지 : " + mesg + "</li>" + "<li>인스턴스명: " + insNm
+ "</li>" + "<li>발생시각: " + occDate + "</li>"
+ "<li>에러스택 :<br /> " + errStack + "</li>"
"</ul></div>";
var win = new Ext.Window( {
title : 'Error',
closable : true,
width : 600,
height : 350,
layout : 'border',
modal : true,
items : [{
region : 'center',
title : '에러메세지',
border : false,
autoScroll : true,
html : markup
}]
});
win.show(this);
}
}
}();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);
관련소스다운로드