ExtJS 4 - 컴포넌트 개발에 MVC를 사용하는 MVC 아키텍처에 대한 질문들

Question

Extjs 4 MVC 아키텍처에 관한 질문이 거의 없으므로 몇 가지 힌트 나 예제에 대해 매우 감사하게 생각합니다.

1. 컨트롤러가보기와 어떻게 연결되어 있습니까? 보기에 대한 참조가있는 컨트롤러의 패턴은 무엇입니까?

2. 컨트롤러가 응용 프로그램 인스턴스에 대해 전역으로 간주됩니까? 애플리케이션 인스턴스에 의해로드되는 컨트롤러를 보여주는 예제 만 보았지만 컨트롤러가 일부 하위 컴포넌트의 일부인 것을 본 적이 없습니다. MVC가 컴포넌트 클래스에 적용되지 않는다는 것을 의미합니까? 예 : 그리드, 검색 기준 패널 및 기타 몇 가지 컨트롤/메뉴로 구성된 목록 검색 구성 요소를 작성하고 싶습니다. MVC는 해당 컨트롤의 내부 논리를 구현하는 데 매우 유용하지만 extjs API는 이것이 지원되는 시나리오가 아니라고 제안합니다.

3. Extjs 4 (Ext.require)에는 멋진 동적 로딩 기능이 있습니다. 그러나 MVC 아키텍처와 어떻게 든 작동해야합니까? 뷰와 컨트롤러의 동적 로딩이 지원됩니까? 이전 질문에서와 마찬가지로 모든 컨트롤러, 모델 및 뷰가 응용 프로그램 시작시 미리로드되는 예제 만 보았습니다. 나는 사용자의 액션에 대한 뷰를로드하는 것에 대해 생각하고 있으며 뷰의 이름은 사용자가 액션을 완료 한 후에 만 ​​알 수 있습니다. 뷰를로드하는 방법, 컨트롤러에 대해서는 어떻게해야할까요?

안부 RG

Answer 1

• 은 내가 Supervising Controller 패턴을 권장합니다. 본질적으로보기에는 단순한 데이터 바인딩 (콤보 박스 및 그리드 생각)을 제외하고는 논리가 없으며 모든 이벤트 처리가 컨트롤러에 있습니다 (예 : 사용자가 단추를 클릭하여 계산을 새로 고침). 모델은 모든 데이터 로직을 처리합니다 (예 : 대출 월별 지불 계산). 컨트롤러는 form.loadRecord()를 사용하여 모델을 뷰에로드하고 form.updateRecord()를 사용하여 폼 값을 모델에 저장할 수 있습니다.

• 컨트롤러에는 사용자 정의 속성이없고 이벤트 처리기 만있는 상태가 없어야합니다. 이런 식으로 컨트롤러는 동시에 여러 뷰 인스턴스를 처리 할 수 ​​있습니다. 첫 번째 매개 변수를 통해 뷰에 대한 참조를 얻으려면 일부 트릭이 필요하지만 문제는 없습니다.

• 시작할 때 모든 컨트롤러를로드 할 수 있습니다. 파일을 연결하고 최소화해야합니다.

Answer 2

Afaict, Ext.require는 Extjs MVC에서 잘 작동합니다. (Fwiw, Ext.require가 아닌 requires:[] 설정 항목을 사용합니다.) 최상위 수준 viewport.js에서 "최상위 수준"보기 만 필요하도록 제한 요구 사항을 넣을 수 있습니다.

예. 두 개의 하위 패널이있는 테두리 레이아웃 패널이 있다고 가정 해 보겠습니다. 뷰포트는 require: ['topLevelView'] 입니다. 그런 다음 topLevelView는 require: [westPanelView, centerPanelView]이 될 수 있습니다.

인스턴스화 .. afaict는 app.js가 모든 것을 인스턴스화하는 것을 담당합니다. (내 컨트롤러는 뷰를 인스턴스화하지 않습니다.)

컨트롤러 통합의 경우 ... extjs mvc way에는 뷰에서 이벤트를 처리하는 컨트롤러가 있습니다. 컨트롤러는 refs:[] 구성 및 구성 요소 쿼리 선택기를 사용하여 원하는 뷰 이벤트를 "연결"합니다.컨트롤러의 이벤트 핸들러는 다른 뷰 (참조로도)를 업데이트하고 모든 매장의 데이터를 업데이트/동기화하는 작업을 수행합니다.

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

그것보다는 "단순한"예를 들어,하지만 애플 리케이션 조직 및 이벤트 배선의 기초를 커버하는 것 같다

나는 높은 엽차의 문서에서 MVC 아치 가이드의주의 읽기를 권장합니다 . 또한, MVC를의 아키텍처에 세 부분 가이드는 여기에이 앱은 다음과 같습니다

http://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt1

다시, 매우 읽을 것을 권장합니다.

마지막으로 extjs 4.x 샘플은 extjs MVC 아키텍처를 사용하여 작동하는 코드 (간단한 응용 프로그램이지만 동작)를 가지고 있습니다. 이것은 코드 부트 스트래핑 앱에서 도움이 될 것입니다. 배포판을 다운로드 할 때 examples/app/* 파일을 확인하십시오. 거기에 세 가지 MVC 예제가 있습니다. 하나는이 응용 프로그램입니다 :

docs.sencha.com/ext-js/4-0/#!/example/app/feed-viewer/feed-viewer.html

(도에 내 이빨을 절단하고 extjs 4 mvc .. 그리고 디버깅에 영속성이 필요합니다!)