데꾸벅의 생각들

ExtJS를 이용한 EditorGrid 붙이기

Scripter/EXTJS / 2008. 4. 7. 13:05

사내(넥스트리)위키에 올렸던 자료를 다시 정리하여 포스팅한다.

일반그리드와 달리 에디터그리드의 경우 해당 Cell에 해당하는 값을 변경할수 있다. 각각의 선택된 셀값과 추가하는 방법 및 해당 값들을 셋팅하는 방법, ActionComplete후 dirtyFlag를 삭제하는 방법등에 대해서 알아보자! 에디터 그리드는 이미 이전장에서 사용되었던 기본그리드를 사용하였으므로 반드시 이전장을 참조하도록 한다. 추가적으로 FormPanel에 대하여 미리 알아 보도록 한다.

최종소스 :

invalid-file

basicGrid.html

<html>
<head>
<title>Basic Grid</title>
<link rel="stylesheet" type="text/css" href="http://techbug.tistory.com/resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="basicGrid.js"></script>
</head>
<body id="basicGridBody">
	<div id="DIV_GRID_HERE"></div>
</body>
</html>

basicGrid.js

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'
}, this.myRecordObj = Ext.data.Record.create([ {
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.EditorGridPanel( {
store : this.store,
columns : [ {
id : 'company',
header : "Company",
width : 160,
sortable : true,
dataIndex : 'company',
editor : new Ext.form.TextField( {
allowBlank : true
})
}, {
header : "Price",
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex : 'price',
editor : new Ext.form.NumberField( {
allowBlank : false,
allowNegative : false
})
}, {
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',
editor : new Ext.form.DateField( {
allowBlank : false,
minValue : '08/21/00',
disabledDays : [0, 2, 6],
disabledDaysText : '이날짜는 선택안되요'
})
}

],
stripeRows : true,
autoExpandColumn : 'company',
loadMask : {
msg : '데이타 로드중'
},
clicksToEdit : 1, // Edit하기 위해 Cell을 클릭해야 하는 횟수 (최대2, 최소1)
sm : new Ext.grid.RowSelectionModel( {
singleSelect : true
}),
view : new Ext.grid.GridView( {
forceFit : true,
enableRowBody : true,
emptyText : 'No Record found'
}),
height : 350,
width : 1024,
title : '기본 그리드',
tbar : [
{
text : '저장',
scope : this,
handler : this.saveAllChanges
},
'-',
{
text : '추가',
scope : this,
handler : this.addRecord
},
'-',
{
text : '삭제',
scope : this,
handler : function() {
var selectedKeys = this.grid.selModel.selections.keys;
if (selectedKeys.length > 0) {
Ext.MessageBox.confirm('확인',
'정말 삭제할래요? 삭제하면 복구안돼요..',
this.deleteRecord, this);
} else {
alert('삭제할 Row를 선택하세요');
}

}
}, '-', {
text : '새로고침',
scope : this,
handler : function() {
this.store.reload()
}
}]
});

this.grid.render('DIV_GRID_HERE');
this.store.load();
this.grid.on('afteredit', this.afterCellEditEventHandler, this); // Cell을
// 변경후
// 일어나는
// 이벤트
},

// CEll변경후 일어나는 이벤트
afterCellEditEventHandler : function(editEvent) { // Cell을 변경후 일어나는
// 이벤트
var gridField = editEvent.field;
var gridValue = editEvent.value;
editEvent.record.set('company', editEvent.record.get('company')
+ '변경필트:' + gridField + '변경된값' + gridValue);
this.updateCell(editEvent);
},

// 삭제하는 루틴
deleteRecord : function(btn) {
if (btn == 'yes') {
var selectedRows = this.grid.selModel.selections.items;
var selectedKeys = this.grid.selModel.selections.keys;
var selectedRecord = this.grid.selModel.getSelected();
alert(selectedRecord.get('company') + '\n' + selectedRows
+ '\n' + selectedKeys + '\n지우는 Ajax Call 후에 다시 리로드한다.');
this.store.reload();
}
},

// 새로운 Row를 추가하기
addRecord : function(btn) {
var r = new this.myRecordObj( {
// this.myRecordObj는
// this.store.reader의 Record Field를
// 말함.
company : '새 회사명',
price : 0.00,
change : 0.00,
pctChange : 0.00,
lastChange : new Date(),
newRecord : 'yes', // Update할때 트리거로 이용하기 위해서
id : 0
});
this.grid.stopEditing();
this.store.insert(0, r);
this.grid.startEditing(0, 0); // 추가할 rowIndex, colIndex 위치
},

// 수정된 Cell만 저장하기
updateCell : function(editEvent) {
var isNewRecord = editEvent.record.data.newRecord;
// 업데이트할때 사용될
// 트리거('yes'면 새로운 레코드)
/** ** AJAX 통신 모듈 들어가는곳 ***** */

// DB를 성공적으로 업데이트 후 처리할 루틴
if (isNewRecord == 'yes') {
// 저장한후 새로운 레코드가 아님을 표시
editEvent.record.set('newRecord', 'no');
// isDirty Flag 없애기
this.store.commitChanges();
} else {
this.store.commitChanges();
}

// 잘못됐을경우는 this.sotre.rejectChanges(); 로 리복한다.
this.store.rejectChanges();

},

//변경된것들 모두 저장하기
saveAllChanges : function() {
var modifyRecords = this.store.getModifiedRecords(); //수정된 레코드 모두 찾기
var modifyLen = modifyRecords.length;
if (modifyLen > 0) {
for (var i = 0;i < modifyLen; i++) {
/* 각 Row마다 AJAX Call을 하거나 배열로 모두 넘기는 Ajax Call Method가 들어간다.*/
var modifyCompany = modifyRecords[i].get('company')
}
}

}

}
}();
Ext.EventManager.onDocumentReady(BasicGridClass.init, BasicGridClass, true);

'Scripter > EXTJS' 카테고리의 다른 글

Extjs Qtips 사용하기 (2)	2008.04.16
Extjs 기본레이아웃에 각종 패널붙이기 (12)	2008.04.16
ExtJS 로드맵 (0)	2008.04.01
ExtJS를 이용한 Password Meter (0)	2008.04.01
Ext JS Ext.ux.YoutubePlayer (0)	2008.03.29

Post by 넥스트리소프트 데꾸벅(techbug)

, |

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

ExtJS를 이용한 EditorGrid 붙이기

basicGrid.html

basicGrid.js

'Scripter > EXTJS' 카테고리의 다른 글

티스토리툴바