ExtJS 4 MVC 다중 인스턴스보기 및 하위/하위 컨트롤러 문제

Question

ExtJS 4의 MVC 패턴에 문제가 발생했습니다. 적어도 생각한 것 같습니다. 이 질문에 여러 사람에게 다가 섰고 Sencha 포럼에 수 차례 게시 한 결과 지금 전구 또는 확인 중 하나를 얻으려는 목적으로 광범위한 잠재 고객을 찾고 있습니다.

문제

응용 프로그램이 자신이 미니 응용 프로그램입니다 일부는 다양한 뷰를 열 수있는 기능이 있습니다. 또한 사용자는보기의 여러 동시 사본을 열어서 사용하고자 할 수 있습니다.

이 응용 프로그램은 단일 페이지 클라이언트 측 자바 스크립트 응용 프로그램입니다.

ExtJS 4 MVC 모델에서는 Application 클래스의 모든 컨트롤러를 정의해야합니다. 그런 다음이 컨트롤러는 응용 프로그램이로드 될 때 초기화됩니다. 컨트롤러는보기, 모델 및 상점을 추적합니다.

제어기 A를 여러 번 초기화 할 때,보기의 사본을 두 개 이상 작성하면 동일한 데이터 저장소를 참조하는 두 개의보기가 생겨 기능적으로 중복 이벤트를 응용 프로그램 이벤트 버스로 보냅니다.

저는 새로운 프로토 타입 메소드를 Component와 Controller에 추가하여 a) 하위 컨트롤러 (일부 컨트롤러가 상당히 커지고 있음)와 b) 작업 할 뷰를 위해 특별히 상점을 정의 할 수있게했습니다. 모델을 컨트롤러에서 정의 할 수 있습니다. 서버에서 레코드를 가져 오는 것과 같은 작업을 수행해야 할 경우 핸들러가 쉽게 사용할 수 있습니다.

질문

MVC의 나의 이해는 모델보다 직접적으로 다음 컨트롤러보다보기 관련이 있다고 생각하는 저를 이끌 것입니다. ExtJS 4는로드 된 데이터의 재사용을 장려하기 위해 컨트롤러에 Store (더 고전적인 모델의 래퍼로 볼 수있는 것으로 생각할 수 있음)를 부착하고 같은 클래스의 많은 복사본을 가지지 않도록 최적화하기로 결정했습니다 인스턴스화. 그러나 사용자가 볼 수있는 인스턴스가 여러 개있을 경우이 작업을 수행 할 수 없다고합니다. 내 생각에, 많은 인스턴스를 가지는 것은 OO 프레임 워크에서 중요한 옵션이므로, 왜 추세를 버리고 일부 Ext 기본 클래스에서 프로토 타입을 구현했는지. (Ext.implement! 감사합니다.).

상자의 출력을 사용하여에로드 다른 데이터 뷰의 동시에 여러 인스턴스를 가질 수있는 방법이 있습니까 등 제공된 세터, 게터의 MVC 클래스와 함께 사용합니다?

Answer 1

물론. 무엇이 당신을 다르게 믿게 만들었습니까? 다음은 Window 구성 요소에서 확장되는 사용자 정의보기를 만드는 예제입니다. 같은 컨트롤러에서 여러 번이 메서드를 실행할 수 있으며 뷰의 새 인스턴스를 가져올 수 있습니다.

 this.getRequestModel().load(requestID,{  //load from server (async) 
       success: function(record, operation) { 
         var view = Ext.widget('requestEdit',{ 
          title: 'MyRequest '+requestID 
         }); 
         var form = view.down('form'); 
         form.loadRecord(record); 
       } 
     }); 

Answer 2

나는 당신이 이제까지 관계없이 얼마나 많은 조회수/모델로, 컨트롤러의 1 개 이상의 인스턴스를 필요가 있다고 생각하지 않습니다

은 "이"코드에서 실행되는 컨트롤러를 말합니다. 여기에 기능적인 예를 참조하십시오

http://whatisextjs.com/extjs-4-extension/fieldset-w-dynamic-controls-7

Answer 3

어떻게 당신이 당신의 뷰를 만들려면 어떻게해야합니까?다른 상점이나 구성 데이터를 모든 객체에 전달할 수없는 이유는 없습니다. 일부 코드 샘플은 정확히 수행중인 작업에 도움이됩니다. 예를 들어, 우리는 비슷한 소리를내는 응용 프로그램을 가지고 있으며 모든 것은 확장을 통해 이루어집니다. 그리드가 필요한 경우 우리는 실행합니다.

Ext.define('MyApp.grids.something',{ 
extends:'Ext.grid.panel' 
//... 

이 클래스들은 미리 정의되어 있습니다. 컨트롤러 또는 뷰가이 그리드를로드 할 때 당신이 볼 수 있듯이 그런 다음, 그들은

var grid=Ext.create('MyApp.grids.something',{id:'unique',store:mystore}); 

를 사용하고, 우리는 같은 그리드에 다른 설정 옵션에서 만들 때마다 전달할 수 있습니다. 당신이 그래서 우리가 미리 정의 된 몇 가지 옵션을 물론 제외

Ext.create('Ext.grid.Panel'); 

, 일부 비 재정의 수 등을 치료하는 것처럼 우리는 정확히이 일을 처리 할 수 ​​있습니다.

희망이 도움이되었습니다.

Answer 4

나는 비슷한 문제에 직면했다 :

각 클라이언트에 대한보기의 새로운 인스턴스를 여는 CRM 형 응용 프로그램에 대한 탭 패널을 고려하십시오. 탭보기에는 해당 클라이언트와 관련된 다양한 데이터 콜렉션과 상호 작용하기위한 3 또는 4 개의 행 편집 격자 패널이 포함되어 있다고 가정 해보십시오.

내가 생각해 낸 해결책은 Sencha 포럼의 this을 기반으로했습니다. 너트 셸에서 뷰에서 전달되는 거의 모든 이벤트에는 뷰 자체에 대한 참조가 포함됩니다. 내 컨트롤러의 제어 함수에있는 핸들러는 모두이를 사용하여 올바른 뷰 인스턴스에 대한 참조를 가져옵니다. 이 필요한 같은 상점의 여러 인스턴스를 처리하기위한

, 나는 그 게시물에서 마음이했다 ...보기 또는 글로벌 하나의 저장 예를 들어

에 따라 달라집니다 필요합니다. 당신이 세계적으로 사용하려고한다면 그것을 세계화하십시오. 만보기에 필요하면보기에 놓습니다. MVC는 법이 아니므로 필요에 맞게 변경할 수 있습니다. 기술적으로 MVC의 컨트롤러 부분 인 은 뷰와 모델 파트 사이의 중간 인물이지만 때로는 필요하지 않은 경우도 있습니다. 나는 시간의 95 %보기에서 스토어를 만듭니다. 예를 들어 ...

제품 스토어가있는 경우 그 스토어를 그리드에만 참조하면됩니다. 일반적으로 응용 프로그램의 의 다른 부분에는 필요하지 않습니다. 그러나 국가를로드 할 스토어가있는 경우 은 종종 전역 적으로 필요하므로 한 번만로드해야하며 해당 스토어를 여러보기로 설정/사용할 수 있습니다.

그래서보기의 initComponent 메소드 내부의보기 인스턴스와 관련된 필요한 저장소를 만들었습니다. 응용 프로그램에는 MVC 권장 사항에 따라 저장소 클래스로 만든 전역 저장소가 몇 개 있습니다. 보기 내부에 뷰 인스턴스 저장소를 캡슐화하기 위해 멋지게 작업했습니다. 그런 다음 컨트롤러의 인스턴스 하나만 있으면됩니다.

귀하의 질문에 구체적으로 답하기 위해 현재 같은 저장소 생성자를 사용하는 동일한보기의 여러 인스턴스를 처리하기위한 ExtJS 공식 권장 사항 또는 설정이 없습니다. 나는 그런 식으로 뭔가를 찾는 데 시간을 할애했으며, 포럼 중재자 중 한 명이이 추천을 찾았습니다.

Answer 5

이 작업은 비교적 쉽게 수행 할 수 있습니다. 몇 가지 규칙을 따라야합니다.

1. 앱 시작시 컨트롤러를로드하십시오. 그들을 내리지 마십시오. 메모리 나 시간에 대해 걱정하지 마라. js를 최소화하고 연결하는 한 수백 개의 컨트롤러에도 꽤 작다.

2. 컨트롤러의 refs 또는 views 속성을 사용하지 마십시오. 하나의 컨트롤러 인스턴스 하나를 사용하지만 뷰의 여러 인스턴스를 사용하므로 뷰에 대한 참조가 필요하지 않습니다.

3. 컨트롤러의 이벤트 리스너 만 사용하십시오. 당신은 당신의 견해에 관한 사건들을 경청 할 것입니다. 처리기의 "cmp"매개 변수를 통해 이벤트 처리기에서 항상 뷰에 대한 (임시) 참조를 얻을 수 있습니다.

4. 보기를 "실행"하려면보기를 만들어서 다른보기에 추가하십시오. 파괴하려면 파괴하십시오. 컨트롤러를 사용하여보기를 시작하지 마십시오. 컨트롤러에서 afterrender 및 beforedestroy 이벤트를 사용하여 로직을 추가 할 수 있습니다.

Answer 6

ExtJS 'MVC에서 컨트롤러는 사용자가 볼 수있는 싱글 톤입니다. 나는 DeftJS가 MVC에 대해 어떻게 생각하는지 좋아합니다. 뷰의 각 인스턴스에는 컨트롤러의 인스턴스가 있습니다. 이 방법으로 뷰의 특정 부분에 대한 모든 "제어 규칙"을 컨트롤러에 넣을 수 있으며 뷰가 열릴 때만 인스턴스화됩니다.

동일한 프로젝트에서 여러 Defts JS 응용 프로그램을 사용할 수있는 경험이 없었습니다.

Answer 7

체크 아웃 this post. 가게와

// .../app/view/Viewport.js 
Ext.define('MyApp.view.Viewport', { 
    // ... 
    items: [ 
     // ... 
     { xtype: 'testview', store: 'Store1', itemId: 'instance1' }, 
     { xtype: 'testview', store: 'Store2', itemId: 'instance2' } 
    ] 
}); 

문제가 해결 될 것입니다, 분명히 : 아이디어는보기 설정에서 일부 구성 (store 추천하고 itemId)를 타고 뷰포트 설정에 넣어있다. itemId이 다르면 이벤트를 올바르게 처리 할 수 ​​있습니다.