ExtJS6 열일곱번째강의 - ExtJS 6 그리드 에디팅 플러그인 적용하기(ExtJS 6 Applying Grid editing plugin )
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼
https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ
이전 시간에는 그리드 페이징을 위하여 페이징툴바 컴포넌트에 plugins 속성을 지정하여 페이징 컴포넌트의 종류를 변경해 보았습니다.
오늘은 엑셀의 시트처럼 셀을 변경할수 있는 에디팅 플러그인들을 소개해보고자 합니다.
에디팅 플러그인 종류 및 선언 위치
그리드 컴포넌트 속성에 아래와 같이 선언을 해줍니다.
// 각각의 셀을 수정할 수 있는 에디트 플러그인
plugins : 'cellediting'
or
// 각 로우 전체를 한번에 수정 할 수 있는 에디트 플러그인
plugins : 'rowediting'
원하는 에디트 플러그인 설정을 완료 했다고 바로 에디팅 기능이 적용되는 것이 아닙니다.
각 컬럼의 속성(dataIndex 설정과 동일 depth)에 editor 속성을 정의 해준 다음, value 값을 JSON OBJECT 형식으로 폼필드의 xtype 들과 속성들을 object에 정의를 해주어야 비로소 에디팅 기능이 적용되는것입니다.
수정된 그리드 데이터를 서버로 전송하려면 ?
우리는 이벤트 리스너를 배운적이 없습니다.
고로, 일반적으로 수정 후, 서버로 전송! 이라는 개념이 아직은 없는거죠.
하지만, 기본적인 데이터스토어의 속성들을 변경함으로써 자동적으로 그리드의 신규로 등록이 되었건, 기존 데이터값이 수정이 되었건, 그리드의 로우가 삭제가 되었던건 간에 알아서 서버로 변경된 값들을 전송을 시켜줍니다.
이방법으로 등록/삭제는 이후에 진행하는걸로 하고, 오늘은 에디팅이란거 자체가 수정기능을 포함하고 있기 때문입니다.
스토어의 강의에서 진행한 속성들을 위주로 설명드리도록 하겠습니다.
store : {
autoLoad : true,
autoSync : true,
fields : ['si','gungu','dong'],
pageSize : 10,
proxy : {
type : 'ajax',
api : {
read : '리스트 조회 URL',
update : 'DB Update용 URL'
},
reader : {
type : 'json',
rootProperty : 'data',
totalProperty : 'total'
},
writer : {
type : 'json',
rootProperty : 'data',
writeAllFields : true,
encode : true
}
}
}
위에 빨간색으로 칠한부분이 이전시간과 변경된 코드 또는 등록/수정/삭제를 위하여 필요한 CONFIG 속성입니다.
autoSync
autoLoad의 경우는 자동적으로 컴포넌트 생성되면서 데이터를 서버로부터 조회하여 받아오는 역할을 하지만, autoSync의 경우는 자동적으로 변경,삭제등의 이벤트가 발생되면 자동적으로 처리된 데이터를 서버로 전송을 하는 역할을 합니다.
api
이전에는 url 속성을 주어서 목록을 조회해왔다면, 별도로 추가,수정,삭제,조회 구분을 주기위하여 url 속성을 api 속성으로 변경해주면서 "create","read","update","destroy" 속성을 주어 각각의 기능들을 처리한 URL 정의를 해줍니다.
writer
reader는 조회에 필요한 proxy 속성 값입니다.
writer는 등록/수정/삭제에 필요한 속성 값입니다.
writer의 서브 속성에는 rootProperty 속성이 있는데 이부분을 HTML로 쉽게 설명드리자면, FORM SUBMIT 했을 경우 폼영역내에 존재하는 INPUT 태그의 NAME값이라고 생각하면 쉬울겁니다.
즉, 서버에서 변경된 JSON 문자열 데이터들을 받기 위한 PARAMETER KEY 값입니다.
writeAllFields 의 경우, 변경된 로우의 모든데이터를 전송하느냐 아니면 변경된 데이터 + id값만 전송하느냐에 따른 차이입니다.
서버로 변경데이터들이 넘어가는것을 확인했다면, 별도로 서버에서 처리해주어야 하는 것은?
변경된 데이터는 JSON STRING 구조로 서버로 넘어갑니다.
해당 문자열을 JSON OBJECT 또는 ARRAY로 변경해주어야 합니다.
어떠한 서버언어와 무관하게 JSON 문자열에서 오브젝트로 변경해주는 라이브러리 또는 기능들이 존재할것입니다.
DB 작업이 진행된 후에 목록조회 했던것과 동일하게 JSON 응답값을 하나 만들어 주어야 합니다.
JSON KEY : success
JSON VALUE : true or false
