Ext JS Code - Grid CRUD 예제

  1   Ext Js Grid

---

 API를 보고 만든 가장 정석대로(제딴에는...) 만든 CRUD 코드입니다. CRUD에 많은 시간을 할애하고 가장 많이 쓰이는 Grid를 컨트롤하는 기술들이 굉장히 중요하다고 여기는 저에게는 그래도 하나하나 최대한 효율적으로 짜본 코드입니다. 혹시 이보다 더 나은 방법이 있다면 거침없이 태클걸어주세요.

Link to github : https://github.com/Deoking/Extjs-notice

  2   폴더구조

---

app

model (게시판 모델 폴더)

NoticeModel.js (게시판 레코드 모델소스 ) - 자바에서 DTO와 같은 개념

store

view

main (시작화면 폴더)

main.js (메인화면 소스)

MainController.js (컨트롤러 - 메인화면에서 발생하는 함수 및 이벤트 처리)

notice (게시판 화면 폴더)

form (입력 및 수정 화면 폴더)

NoticeCreateForm.js (게시글 입력&수정 폼 소스)

NoticeCreateFormController.js (컨트롤러 - 입력,수정 폼에서 발생하는 함수 및 이벤트 처리)

Notice.js (게시판 소스)

NoticeController.js (컨트롤러  - 게시판목록에서 발생하는 함수 및 CRUD 처리)

 폴더구조는 뭐 Sencha CMD로 제너레이터 했을때 그대로 사용했습니다. 이렇게 만들어주니 이게 가장 효율적일것 같은.. 생각이 들어서 뭐 따로 바꾸고 싶다는 마음은 들지 않네요..ㄷㄷ

  3   Main.js

---

 

 Main.js에서는 만들어준 그대로 사용했습니다. 쓰잘때기 없는 west 부분의 메뉴를 지워버린게 다입니다. center에 아이템으로 사용할 notice를 위해 requeires에다가 클래스만 추가했습니다. 그외에 MainController와 MainModel은 손대지 않았습니다.

  4   Notice.js

---

 기본적인 Grid 설정및 리스너 선언이 전부입니다. 그리고 타이틀에 refresh와 add 툴만 세팅해놨구요. add버튼을 클릭하면 새 글을 입력할 수 있는 폼이, refresh 버튼을 클릭하면 그리드가 리로딩 됩니다.

  5   NoticeController.js

---

 

 가장 간단하게 짜려고 노력했던 컨트롤러 부분입니다. 그리드에 대한 CRUD는 이 컨트롤러에서 처리하기 때문에 뒤에 나오는 윈도우 입력 폼 및 수정 폼 에서 그리드로 행해지는 CRUD 이벤트를 모두 이 컨트롤러에서 리스닝하도록 설정했습니다.

 14번 라인부터 22번 라인까지 위에서 말한 이벤트 리스닝 설정입니다. 세개의 이벤트는 전부 입력폼 및 수정폼에서 발생하는 이벤트 입니다. 글 입력 부분 - Create 부분은 해당 그리드의 레코드 모델을 생성하여 add 함수에 던지는 가장 정석적인 방법을 사용 했습니다. add로 추가 후 sync 함수를 날리면 해당 데이터가 서버로 출동하게 되겠지요. 

 뒤에 나올 모델에는 현재 memory로 프록시 설정이 되어있기 때문에 실제로 서버에 다녀오지는 않습니다. 하지만 api 설정에 걸어놓은 주석을 풀고 프록시 타입을 ajax으로 바꾸면 해당 URL을 통해 서버에 요청을 하게 됩니다. 이때는 create api의 URL이 실행 됩니다. 왜냐.. 그리드에 존재하지 않는 아이디이기때문에...

109 라인부터 시작되는 글 수정은 208라인에 작성한 loadRecord 함수로 인해 쉽게 업데이트 할 수 있습니다. 글 수정폼은 그리드의 itemclick 이벤트로 인해 실행이 되고, 클릭된 레코드를 loadRecord 함수로 폼에 로딩시킵니다(208라인). 

 

 우선 이렇게 되면 해당 폼에는 로드된 레코드가 등록이 되어있는 상태이기 때문에 form에 입력된 값을 getValues() 함수가 아닌 getRecord() 함수를 호출(116라인)하여 form의 updateRecord 함수로 곧장 그리드를 업데이트 시켜버리게 됩니다.

116라인의 updateRecord() 함수는 파라미터로 레코드 (Model)을 받기때문에 다른 작업없이 이렇게 쉬운 방법으로 업데이트 할 수 있었습니다.

 이후 163라인에 선언한 syncNoticeRecord() 함수를 실행하면 그리드에 적용이 되게 됩니다. 워낙 빠르게 진행이 되기때문에 수정했다는 dirty 표시는 눈으로는 확인할 수 없을듯 합니다.

 삭제는 뭐 간단합니다. 많이들 아는 방식의 remove 함수를 사용하여 처리했습니다. 이때 deleteNoticeRecord 함수의 파라미터는 수정폼에서 넘겨주는 레코드를 파라미터로 받게됩니다. 뒤에서 확인할 수 있습니다.

  6   NoticeCreateForm.js

---

 

 윈도우 기반의 글 입력 및 수정폼 입니다. 각각의 기능에따라 뷰모델에 바인딩 되는 데이터가 달라지게 됩니다. 위의 NoticeController에서 178라인 부터 215라인 까지가 해당 폼을 생성하는 세팅입니다. 단지 조심해야할 부분은 리스너 부분인데 이 윈도우 기반의 폼이 생성되는 스코프는 Notice 입니다. 

 즉 이 윈도우에서 발생하는 이벤트는 NoticeController를 바라볼지, 아니면 controller로 선언해놓은 NoticeCreateFormController를 바라볼지 기준을 잡지 않은 상태이게 됩니다. 그렇기 때문에 이 윈도우에서 발생하는 모든 함수 및 이벤트는 controller로 선언한 NoticeCreateFormController에서 처리하기 원하기 때문에 리스너의 scope를 controller로 선언했습니다.

  7   NoticeCreateController.js

---

 

 8라인부터 14라인까지의 코드를 봐주시기 바랍니다. closeNoticeCreateFormEvent 라는 이벤트를 리스닝하면 55라인에 선언된 closeNoticeCreateForm 함수가 실행되도록 설정했습니다. 이 이벤트는 입력 및 수정이 완료된후 해당 윈도우를 닫아야 하는데, 입력 및 수정, 즉 그리드에 대한 CRUD는 모두 NoticeController에서 처리하고 있습니다. 그렇기 때문에 이 윈도우에 대한 닫기 이벤트는 NoticeController가 아닌 NoticeCreateFormController에서 처리하기 위해 이벤트를 리스닝하게 설정한 것입니다. 

 실제로 NotcieController 내에서 입력 및 수정이 완료되면 fireEvent를 통해 closeNoticeCreateFormEvent를 호출하는 것을 볼 수 있습니다.

 그외에 윈도우의 버튼 클릭으로 발생하는 CRUD 이벤트는 모두 NoticeController에서 처리할 수 있도록 fireEvent를 통해 각각 기능에 맞는 이벤트를 발생시키는 것을 알 수 있습니다.

마지막으로 해당 예제에 사용한 모델입니다.

  8   NoticeModel.js

---