Ext JS Nested Grid

rowexpander 플러그인을 사용해서 하나의 로우를 확장하면 그안에 새로운 그리드가 존재하는 방식이다.. 가장 필요하면서 가장 알맞은 형태의 그리드인데 문제가 한두개가 아니다.

 심각한 문제가.. 자식 그리드가 생성된 후 부모 그리드의 정렬을 하면 자식그리드가 사라지는가 하면 Height 설정을 안하면 그리드가 짤려서 나온다. Height 설정을 안했으니 사이즈 넘어가면 당연히 잘리는건가 싶었는데 브라우저 크기를 줄였다 키우니 원래대로 나온다.... 이문제는 Height 설정을 해주면 해결 되는데 문제는 나머지 것들이다. 자식그리드가 사라지는것을 포함해서 자식그리드에서 클릭이벤트가 발생하면 콘솔창에 애러가 발생한다. 

 이 콘솔창 애러는 왜그러는가 싶어 구글링 해봤더니 외국인 개발자형님들도 해결못해 안달이다.. 

콘솔창에 발생하는 애러는 다음과 같다.

Ext.panel.Grid 클래스에서 발생하는 애러이고 어느 펑션에서 발생하는지도 찾아 냈는데. 고칠 엄두는 안난다..ㅋㅋㅋㅋ 다음은 부모 그리드를 클릭했을 때 자식 그리드가 사라지는 현상..

이렇게 되버린다.

분명 옆에 - 아이콘을 보니 펼쳐져 있는건데 안에있던 그리드는 사라졌다. 이건 왜그러는지 감도 안온다. 이 두문제만 해결하면 정말 좋을거같은데.. 작성한 코드는 다음과 같다.

  1   View Source

---

 그리드가 렌더링 되면 afterrender이벤트가 발생하고 그것을 리스닝하고 있다. 그 안에서 expandbody이벤트가 발생하면 그리드를 생성해서 펼쳐진 Row 바디에 렌더링 하게 된다. 자식 그리드를 생성한 후 자식 그리드와 부모 그리드의 이벤트중 충돌 가능성이 있는 이벤트들은 swallowEvent를 통해전부 중지 시켰다.

  2   Model Source

---

테스트 하는 중이여서 부모 그리드에서 사용하는 스토어 그대로 사용했다.