Extjs 그리드안에서 프로세스바 구현하기
Scripter/EXTJS / 2008. 2. 21. 20:05
Extjs를 사용하다가 각 그리드 row에 각각의 프로세스바를 구현하게 되었다.
각 grid의 node 마다 프로세스 클래스를 재선언하였더니 너무 페이지자체가 무거워져
taskMgr를 이용하여 CSS로 구현하기로 하였다.
아래 소스는 넥스트리 사내프로젝트에서 구현되었던 일부소스이다.
[Extjs 소스중 일부] 기밀이므로 요기 까지만... ^^
스타일시트
각 grid의 node 마다 프로세스 클래스를 재선언하였더니 너무 페이지자체가 무거워져
taskMgr를 이용하여 CSS로 구현하기로 하였다.
아래 소스는 넥스트리 사내프로젝트에서 구현되었던 일부소스이다.
[Extjs 소스중 일부] 기밀이므로 요기 까지만... ^^
// 타스크매니저로 autorefresh한다.
this.showTask = Ext.TaskMgr.start({
run: this.store.reload,
scope: this.store,
interval:1000,
args:[{params:{'appId':appId, 'deployId':deployId}, add:false}]
});
// 배포상태를 가져오는것을 멈춘다.
Ext.TaskMgr.stop(this.showTask);
// 데이타가 모두 로드되었을 경우 해당 데이타값을 비교하여 계속
// autoRefresh할것인가를 결정한다.
this.store.on('load',function(store,records,opts){
this.loadCompleteStatus(store,records,opts);
},this);
/**
* 데이타가 모두 로드되었을 경우 해당 데이타값을 비교하여 계속 autoRefresh할것인가를 결정한다.
* this.store.on('load',fn) 에 해당하는 메쏘드 실제 그리드안의
* record에 해당하는 내용들을 모두 update한다.
*/
loadCompleteStatus : function(store,records,opts){
var totalSize = store.getCount();
var totalStop = 0;
for(var i=0; i < totalSize; i++){
var record = store.getAt(i);
var pid = '_PROGRESSING_'+record.data.instsId;
var lastMessage = (record.data.lastMessage) ? record.data.lastMessage : '';
var progressRate= (record.data.progressRate)? parseInt(record.data.progressRate) : 0;
var curStop = (record.data.isStop) ? parseInt(record.data.isStop) : 0 ;
totalStop = totalStop + curStop;
// 성공+실패 횟수가 전체 갯수와 같을 경우 autorefresh를 멈춘다.
if(totalStop == totalSize) this.stopDeployStatus();
}// for end
}
/**
* 각 인스턴스마다의 정보(인스턴스명, 인스턴스Id, IP,port)를 그리드Row에 모두 표현한다.
*/
rendererDeployStatus : function(value, metadata, record,rowIndex,colIndex,store) {
return String.format(
'<div class="_DEPLOYSTATUS_ROW_"><b>{0}</b><span class="_INSTANCE_IP_">{1}</span>'
+'<div class="_PROGRESSBAR_CLASS_">'
+'<div class="_PROGRESSBAR_" style="background-position-x:{2}%">{2}% : {3}</div>'
+'<div id="_PROGRESSING_{4}" class="_PROGRESSBAR_COM_" '
+'style="top:0;width:{2}%">{2}% : {3}</div></div></div>',
value
,'http://'+record.data.ip +':'+record.data.port
, record.data.progressRate
, record.data.lastMessage
, record.data.instanceId
);
},
this.showTask = Ext.TaskMgr.start({
run: this.store.reload,
scope: this.store,
interval:1000,
args:[{params:{'appId':appId, 'deployId':deployId}, add:false}]
});
// 배포상태를 가져오는것을 멈춘다.
Ext.TaskMgr.stop(this.showTask);
// 데이타가 모두 로드되었을 경우 해당 데이타값을 비교하여 계속
// autoRefresh할것인가를 결정한다.
this.store.on('load',function(store,records,opts){
this.loadCompleteStatus(store,records,opts);
},this);
/**
* 데이타가 모두 로드되었을 경우 해당 데이타값을 비교하여 계속 autoRefresh할것인가를 결정한다.
* this.store.on('load',fn) 에 해당하는 메쏘드 실제 그리드안의
* record에 해당하는 내용들을 모두 update한다.
*/
loadCompleteStatus : function(store,records,opts){
var totalSize = store.getCount();
var totalStop = 0;
for(var i=0; i < totalSize; i++){
var record = store.getAt(i);
var pid = '_PROGRESSING_'+record.data.instsId;
var lastMessage = (record.data.lastMessage) ? record.data.lastMessage : '';
var progressRate= (record.data.progressRate)? parseInt(record.data.progressRate) : 0;
var curStop = (record.data.isStop) ? parseInt(record.data.isStop) : 0 ;
totalStop = totalStop + curStop;
// 성공+실패 횟수가 전체 갯수와 같을 경우 autorefresh를 멈춘다.
if(totalStop == totalSize) this.stopDeployStatus();
}// for end
}
/**
* 각 인스턴스마다의 정보(인스턴스명, 인스턴스Id, IP,port)를 그리드Row에 모두 표현한다.
*/
rendererDeployStatus : function(value, metadata, record,rowIndex,colIndex,store) {
return String.format(
'<div class="_DEPLOYSTATUS_ROW_"><b>{0}</b><span class="_INSTANCE_IP_">{1}</span>'
+'<div class="_PROGRESSBAR_CLASS_">'
+'<div class="_PROGRESSBAR_" style="background-position-x:{2}%">{2}% : {3}</div>'
+'<div id="_PROGRESSING_{4}" class="_PROGRESSBAR_COM_" '
+'style="top:0;width:{2}%">{2}% : {3}</div></div></div>',
value
,'http://'+record.data.ip +':'+record.data.port
, record.data.progressRate
, record.data.lastMessage
, record.data.instanceId
);
},
스타일시트
/* Progress bar 만들기 시작*/
DIV._DEPLOYSTATUS_ROW_ { padding-left:20px; }
DIV._DEPLOYSTATUS_ROW_ B {
display:block;
color:#333;
}
DIV._DEPLOYSTATUS_ROW_ SPAN._INSTANCE_IP_ { color:#333; }
._PROGRESSBAR_CLASS_LEFT_ {text-align:left !important}
DIV._PROGRESSBAR_CLASS_ {
text-align:left !important;
vertical-align:middle !important;
padding:0 !important;
height:18px !important;
overflow:hidden !important;
margin:7px 20px 10px 0 !important;
background : transparent url(../img/progressbgwhite.png) 0 0 repeat-x !important;
border:#6593CF solid 1px !important;
position:relative;
}
DIV._PROGRESSBAR_ {
text-align:left !important;
vertical-align:middle !important;
padding:0 3px 0 10px !important;
margin:0 !important;
height:18px !important;
line-height:18px !important;
white-space:nowrap !important;
overflow:hidden !important;
font-family:'segoe ui',verdana,arial;
color:#396095;
background-image : url(../img/progressbgwhite.png) !important;
background-repeat : no-repeat ;
background-position-y : 0;
border:0 !important;
}
DIV._PROGRESSBAR_COM_ {
text-align:left !important;
vertical-align:middle !important;
padding:0 3px 0 10px !important;
margin:0 !important;
height:18px !important;
line-height:18px !important;
white-space:nowrap !important;
overflow:hidden !important;
font-family:'segoe ui',verdana,arial;
color:white;
background: url(../img/progressbarbg.png) 0 0 repeat-x !important;
border:0 !important;
position:absolute;left:0;
z-index:10;
}
.failrow DIV._PROGRESSBAR_COM_ {
background-image: url(../img/progressbarfail.png) !important;
background-color:#EFF39B !important;
}
/*프로그레스바 만들기 끝 */
DIV._DEPLOYSTATUS_ROW_ { padding-left:20px; }
DIV._DEPLOYSTATUS_ROW_ B {
display:block;
color:#333;
}
DIV._DEPLOYSTATUS_ROW_ SPAN._INSTANCE_IP_ { color:#333; }
._PROGRESSBAR_CLASS_LEFT_ {text-align:left !important}
DIV._PROGRESSBAR_CLASS_ {
text-align:left !important;
vertical-align:middle !important;
padding:0 !important;
height:18px !important;
overflow:hidden !important;
margin:7px 20px 10px 0 !important;
background : transparent url(../img/progressbgwhite.png) 0 0 repeat-x !important;
border:#6593CF solid 1px !important;
position:relative;
}
DIV._PROGRESSBAR_ {
text-align:left !important;
vertical-align:middle !important;
padding:0 3px 0 10px !important;
margin:0 !important;
height:18px !important;
line-height:18px !important;
white-space:nowrap !important;
overflow:hidden !important;
font-family:'segoe ui',verdana,arial;
color:#396095;
background-image : url(../img/progressbgwhite.png) !important;
background-repeat : no-repeat ;
background-position-y : 0;
border:0 !important;
}
DIV._PROGRESSBAR_COM_ {
text-align:left !important;
vertical-align:middle !important;
padding:0 3px 0 10px !important;
margin:0 !important;
height:18px !important;
line-height:18px !important;
white-space:nowrap !important;
overflow:hidden !important;
font-family:'segoe ui',verdana,arial;
color:white;
background: url(../img/progressbarbg.png) 0 0 repeat-x !important;
border:0 !important;
position:absolute;left:0;
z-index:10;
}
.failrow DIV._PROGRESSBAR_COM_ {
background-image: url(../img/progressbarfail.png) !important;
background-color:#EFF39B !important;
}
/*프로그레스바 만들기 끝 */
'Scripter > EXTJS' 카테고리의 다른 글
Extjs Grid panel 및 데이타 축출하기 (8) | 2008.02.22 |
---|---|
Extjs 레이아웃에서 center region 숨기기 꽁수 (0) | 2008.02.22 |
Extjs 프로세스바 구현하기 (0) | 2008.02.21 |
Extjs을 이용한 특정이벤트 컨텍스트 메뉴달기 (0) | 2008.02.21 |
Extjs와 Adobe AIR를 이용한 Window.gadget만들기 (0) | 2008.02.20 |