ExtJS6 열아홉번째강의 - ExtJS 6 그리드 CRUD 등록,수정,삭제,조회해보기 (ExtJS 6 grid crud finish in one shot)

여러분들의 YOUTUBE 구독이 저에게 큰힘이 된답니다!!

YOUTUBE 에서 "개발로짜"검색 또는 아래 채널구독 부탁드릴게요 ^^

https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ

CRUD 를위한 MySQL 테이블 생성

그리드 CRUD 진행에 앞서서 미리 말씀드리고 싶은내용은 이번 강좌는 단순하게 지금까지 우리가 배워온 그리드를 이용하여 가장 간단하게 조회부터 등록,수정,삭제를 알아보기 위해서 만들어보는 샘플예제입니다.

서버부분에 대한부분은 각자 사용하시는 언어들이 다양하므로 별도로 다루지 않습니다.

다만, 위의 테이블 스크립트를 이용하여 ExtJS 영상강좌를 통하여 다뤄주시길 바라겠습니다.

문의는 YOUTUBE 댓글로 달아주시면 감사하겠습니다 !! 

sync 를 주지 않는이상 서버 전달은 되지 않는다

이전시간에는 store config 속성에 autoSync라는 속성을 지정해서 별도의 작업없이 서버로 값을 전달 시켜 보았습니다.

하지만, 이번 강좌에서 다룰 취지는 이벤트 핸들러를 통한 sync 및 기타 다양한 작업을 진행을 하기 떄문에 별도로 store에서 autoSync 속성은 제거하였습니다.

CREATE : 데이터스토어에 신규 레코드 삽입

영상에서 보시다시피, 그리드에 로우를 추가하는 것이 아닌, 실제 데이터공간을 담당하는 데이터 스토어에 레코드를 추가 해줍니다.

그러므로 데이터 스토어를 찾아야 하겠죠? 

jQuery나 css나 셀렉터라는 것이 있듯이, ExtJS에서도 셀렉터를 통해서 컴포넌트를 찾을 수 있습니다.

보통 up(컴포넌트 또는 itemId) 과 down(컴포넌트 또는 itemId)를 이용하여 내가 찾고자 하는 컴포넌트를 1차적으로 찾아주어야 합니다.

대부분의 이벤트 핸들러의 첫번째 parameter는 자기 자신을 뜻하는 parameter 값을 의미합니다.

위처럼 예를 들수 있겠습니다.

handler 즉, 버튼 클릭이 발생했을때 상단에 패널컴포넌트를 찾기위한 예제입니다.

만약 엉뚱한 컴포넌트를 찾는다고 한다면, undefined라는 메시지를 콘솔에 출력이 되겠죠..

위와같이 up/down 함수에 대해서 인지 하시길 바라겠습니다.

그리드를 셀렉터를 통해서 찾았다면, 그리드에 정의 된 데이터 스토어를 찾아야겠죠?

그러기 위해서는 아래처럼 셀렉터.getStore()라는 함수를 이용하여 스토어를 획득합니다.

그런다음, add 또는 insert 함수를 이용하여 store에 빈 레코드를 삽입해주도록 합니다.

DESTROY : 그리드상 나타난 데이터스토어의 특정 레코드 삭제

우리의 요구사항은 이렇습니다. 

"그리드에서 선택된 레코드를 삭제한다."

취지는 바로 (그리드에서 선택된) 이 문구입니다.

삽입과는 다르게 셀렉터로 그리드를 찾고 그다음, 그리드의 함수인 getSelection() 함수를 이용하는겁니다.

도큐먼트 문서를 확인해보시면, 배열형 Model 객체를 리턴해줍니다.

현재는 그리드 단일건만 선택이 가능할테니, 무시하시고, 사용법을 알아보도록 합니다.

위와같이 그리드 + 스토어객체를 특정 변수에 담아 준 다음,

선택된 레코드를 찾는것은 그리드에서, 그리고 선택레코드를 삭제하는것은 데이터스토어의 remove 함수를 이용하여 삭제해주도록 합니다.

여기서 잠깐! store sync를 해주지 않았으니, 아직 실제로 데이터처리가 되지 않았습니다.

그러므로, 마지막 적용버튼을 클릭하여 서버로 등록,수정,삭제 처리된 레코드들을 보낸 다음, 목록 재조회를 통하여 CRUD 작업을 마무리 해야합니다.

오늘 그리드 CRUD 관련 정리는 이정도면 될거 같습니다.

기타 부분은 모두 영상을 통하여 확인 하실 수 있을거 같습니다.