Ext JS Grid plugin - SubTable

그리드를 생성하고 하나의 레코드를 클릭하면 그 안에 다른 그리드를 생성해야 할 일이 생겼다. Ext 예제 중 SubTable 플러그인을 이용하면 되는데.. 이게 하나의 "그리드"를 또하나 생성하는 것이 아니라 그 안에 <table>을 써서 그냥 표를 표현할 뿐이었다. 모양은 비슷하나. 할 수 있는 기능이 천지차이여서 써먹을 수 있을지 모르겠는데 우선 만들어 봤으니 기록해 둬야겠다.

SubTable.js 를 지금 내 수준에서는 도저히 뜯어고칠 수가 없다 ㅋㅋ.. 다른 예제를 찾아봐야 할것같기도 하다.

우선 SubTable.js의 코드는 다음과 같다.

  1    SubTable.js Source

---

플러그인을 사용할때 ptype이라는 설정을 사용하는데  alias: 'plugin.subtable'이렇게 정의를 해놓으면 ptype으로 사용하게 되는거구나.. 코드양을 보면 쫌더 공부하면 왠지 고쳐볼 수 있을것 같기도 하고..음..

  2    View Source

---

Grid 이기때문에 Store는 필수이다. 스토어에서 사용하는 모델안에 서브테이블의 데이터를 표시할 Association을 선언해 놓았다. 선언 안해놓으면 동작 안함...

플러그인을 사용한다해도 그냥 Grid 패널을 사용하는것과 거의 동일하다. 단지 plugins 설정을 통해 생성 될 서브테이블의 컬럼을 지정해주는 것과, renderer 설정을 통해 버튼을 생성 해주는것 밖에 추가한게 없다. 스토어 부분에서 사용하는 모델 'MyApp.model.User' 안에는 기본적인 필드설정 과 프록시 설정, Association 설정만 해놓았다.

  3    Model Source

---

Ajax 프록시를 통하여 데이터를 가져온다. 가져올 데이터는 그냥 통으로 만들어 놓았다. 

  4    JSON Data

---