Ext JS Loading data via a proxy

  1   View Source

---

 체크박스 그룹을 통하여 체크박스데이터를 표현할 뷰이다.

items 속성에 체크박스에 대한 내용은 없다. 데이터를 로드하면서 생성할것이다. View(컴포넌트)의 initComponent 속성을 이용하지 않고 View가 렌더링이벤트를 일으키면 담당 View Controller가 이를 감지하고 체크박스를 생성하도록 한다.

  2   View Controller Source

---

 View가 렌더링이벤트를 발생시키면 이를 감지한다.

1. Controller를 보면 init 속성에 'menus-v'항목은 View에서 지정한 xtype이다. 즉 뷰에서 afterrender 이벤트가 발생되면 정의된 함수가 실행되게 된다. 
2. var menus = this.getViewModel().getStore('menuList');를 통하여 우선 View에 정의해놓았던 'menuList' 스토어를 가지고 온다.
3. 그 후 체크박스 그룹을 생성하여 그 안에 채워넣을 체크박스들을 스토어를 통하여 로드한다. 해당 스토어는 View에서 정의한 View Model에 정의되어 있다.

  3   ViewModel Source

---

 위에서 호출한 'menuList'라는 스토어는 stores 설정을 통하여 정의되어있다.

1. stores 설정을 보면 menuList 라는 스토어가 정의되어 있고 이 스토어는 'MyApp.model.MenusModel'라는 Model을 가지고 있다. 스토어에도 데이터를 가져올 Proxy를 설정할 수 있고 모델에직접 설정할 수도있다.
2. Controller에서 menus.load()를 통하여 스토어를 로드하면 스토어에 정의되어있는 Proxy를 통해 서버와 통신하게 되지만 지금은 'MyApp.model.MenusModel'에 정의되어있는 Proxy를 사용한다..(스토어에 Proxy를 정의하지 않았으니 당연한거..)

  4   Model Source

---

 이 Model을 사용하는 모든 스토어는 따로 Proxy를 정의하지 않는이상 해당 Model에 정의되어있는 Proxy를 사용하게 된다.

1. 기본적인 설정은 무시하고 proxy 설정에서 각 요청에대해 처리하는 Method와 호출할 URL을 담고있는 api를 정의하고있다.
2. 위의 예제에서는 load()를 호출했기 때문에 Proxy를 통하여 read api가 호출되게 된다.
3. 호출 결과물은 reader 설정을 통하여 'json'타입으로 받게 될것이며, 데이터 내의 'data'프로퍼티를 Root로 보게된다. 즉 실질적으로 사용할 데이터를 정의해놓은것이다.

  5   JSON Data

---

read api를 호출했을때의 결과물이다.

1. 모델에서 정의해놨던대로 json 데이터의 "data" 프로퍼티의 데이터를 가지고 오게된다.
2. 각각 모델에 정의해놓았던 필드명 대로 매칭이되고 컨트롤러에서 생성하는 체크박스의 프로퍼티로 매칭이 되게 된다.
3. 밑의 개발자도구에서 보이듯 호출된 URL을 확인할 수 있다.