Extjs App Sencha Cmd를 사용하여 작업 공간을 생성하고 두 개의 다른 응용 프로그램을 만든 후 다른 Extjs APP

Question

을 호출하면 첫 번째 응용 프로그램을 실행하고 버튼을 누른 후 두 번째 응용 프로그램을 호출합니다. 메인 응용 프로그램 다른 하위 애플 리케이션을 호출 거기에 그것을 할 수있는 방법은 무엇입니까? 당신의 도움을위한 thx

Answer 1

문제없이 함께 사용할 수있는 별도의 모듈을 개발할 수 있습니다. 두 개념 모두 전혀 충돌이 없습니다.

여기 내 경험을 공유하겠습니다. 현재 프로젝트에서 (처음부터) 시작했을 때 다른 두 팀이 다른 두 개의 응용 프로그램을 개발하여 잠시 후에 하나의 큰 응용 프로그램에 '통합해야'했습니다. 결말 결과를 예측하는 데 천재가 될 필요는 없습니다. 그렇죠? 고객이 더 많은 병렬 작업 (모듈을 개발하는 팀이 더 많음)을 원한다는 소식을 듣자 상황이 더욱 악화되었습니다.

첫 번째 아이디어는 iframe을 사용했지만 PoC는 나쁜 아이디어라는 것을 보여 주었기 때문에 기계를 멈추고 플러그 가능한 아키텍처를 설계하기 시작했습니다. 현재 우리는 고립 된 방식으로 쉽게 개발 된 모듈 (플러그인이라고 부름)을로드 할 수 있기 때문에 잘 수행했습니다. 예를 들어, 우리의 폴더 구조와 같은 모양을 한 번 봐 걸릴 :

을 그리고 이것은 우리가로드 할 모듈을 설정 메타 데이터입니다 :

이것은 많은 장점을 가지고 :

• 모듈은
,745
• 모듈 격리 검사 할 수 있고, 병렬로 개발 될 수있다개
• 모듈을 사용하거나 물론

장애인, 동적으로로드 할 수 있습니다,이 extjs라는 것이 아닙니다 상자 밖으로 제공하지만 당신은 그것을 때문에 가치가 그것을 할 수 있습니다.

그래서 짧은 대답 : 문제는 응용 프로그램의 크기가 아니라 그 구조입니다. 우리가하는 것처럼 사용자 지정 폴더 구조로 권장 MVC 패턴을 따르십시오.

업데이트 : 플러그인 메타 데이터에 대해

. 응용 프로그램 주 제어기에는 하나의 책임 성만 있습니다 : 플러그인을로드하십시오. 이이 코드를 사용하여 수행됩니다

discoverPlugins: function() { 
    var me = this; 
    Ext.each(plugins(), function (d) { 
     me.loadPluginController(d.controller); 
    }); 

    App.History.notifyAppLoaded(); 
}, 

loadPluginController: function (controllerName) { 
    try { 
     var controller = App.current.getController(controllerName); 
     controller.init(App.current); 
    } catch (e) { 
     console.log(controllerName + ' controller couldn\'t be loaded.' + e); 
    } 
}, 

그리고 발송자 모든 플러그인 컨트롤러의 역할이이며,이 (주소 표시 줄) URL을 듣고 역사의 구성 요소이며 물어 플러그인으로, 반복 플러그인을 변경하는 경우 url을 처리합니다. 플러그인은 요청 된 URL을 처리 할 수있을 때 프로세스가 종료됩니다.
이는 '작업'플러그인에 대한 디스패처 구성입니다 :

constructor: function() { 
    this.callParent(arguments); 
    this.router.set({ 
     '!/operations/product/permissions/definition': this.viewPermissionsDefinition, 
     '!/operations/product/accesslist/create': this.createProductAccessList, 
     '!/operations/product/accesslist/{id}/edit': this.editProductAccessList, 
     '!/operations/product/accesslist/{id}': this.viewProductAccessList, 
     '!/operations/product/accesslist': this.viewProductAccessList, 
     '!/operations/{...}': this.notFound, 
     '!/operations': this.root 
    }); 
} 

그리고 이것은 역사 수업 코드의 탐색 방법입니다 :

navigate: function (token) { 
    var me = this, 
     handled; 

    if (token) { 
     handled = false; 
     for (var i = 0; i < me.routers.length; i++) { 
      if (me.routers[i].processToken(token)) { 
       handled = true; 
       break; 
      } 
     } 

     if (!handled) { 
      App.current.fail(404, 'Resource not found.'); 
     } 
    } else { 
     App.current.gotoUrl('/servicedesk/search'); 
    } 
}, 

한 가지 중요한 점은 플러그인 만에 대한 참조를 가지고있다 하나의 공유 구성 요소 : 렌더링되는 가운데 영역 :

refs: [ 
    { ref: 'main', selector: '#center-panel' } 
], 

이 참조는 모든 플러그인 컨트롤러 wh ich는 'AbstractPluginController'의 서브 클래스입니다. 이것은 모듈이 그들의 hoster에 대해 알고있는 유일한 것이기 때문에 중요합니다. 이것이 우리가 평행하게 발전 할 수있는 이유입니다.

AbstractPluginController에 대해이 클래스에는 모든 플러그인 컨트롤러에 유용한 몇 가지 핵심 기능이 있습니다. 예를 들어 필요한 경우 모든 컨트롤러/뷰/모델을로드하기 전에이 클래스는 동적 컨트롤러를 구현합니다 다음과 같이로드 :이 (주 컨트롤러 그냥 초기화 및 파견이기 때문에) 모듈이있다 subcontrollers의 목록을 지정하기 위해 우리를 허용하고, 필요에 따라 그들을 만들 수있게 해준다

createControllerGetters: function (controllers) { 
    var me = this; 
    controllers = Ext.Array.from(controllers); 
    Ext.Array.each(controllers, function (controllerName) { 
     var parts = controllerName.split('.'), 
      idx = parts.indexOf('controller'), 
      significants = parts.slice(idx + 1), 
      name = significants.map(function (e) { return Ext.String.capitalize(e); }).join(''), 
      fn = 'get' + name + 'Controller'; 

     if (!me[fn]) { 
      me[fn] = Ext.Function.pass(me.getController, [controllerName], me); 
     } 
    }); 
}, 

getController: function (controllerName) { 
    this.controllerCache = this.controllerCache || {}; 
    var me = this, 
     cached = me.controllerCache[controllerName]; 

    if (!cached) { 
     me.controllerCache[controllerName] = cached = App.current.getController(controllerName); 
     if (cached) { 
      cached.init(); 
      cached.on('beforedestroy', function() { 
       me.controllerCache[ref] = null; 
      }); 
     } 
    } 

    return cached; 
}, 

.

controllers: [ 
    'Operations.controller.ProductAccessListViewer', 
    'Operations.controller.ProductAccessListEditor', 
    'Operations.controller.ProductAccessListCreator' 
], 

는 요약 :

1. 모듈 본건 호스트 응용 프로그램에 대해 아무것도 알고있다 : 나는 주요 포인트는 이러한 생각합니다.
2. 내비게이션/링크를 통해 통신, 대부분
(그들은 자신의 전망과 함께 뭔가를 할)

컨트롤러의

지연로드 (너무 여분의 메타 데이터를 노출 할 수있는 플러그인) 메타 데이터를 사용하여 호스트에 의해 수행

통합

이 아이디어가 도움이되기를 바랍니다. 여기에는 몇 가지 트릭이 포함되어 있지만 기본적으로 여기에 표시하고자하는 것은 모듈 식 응용 프로그램을 약간의 추가 작업만으로 extjs로 개발할 수 있거나 개발해야한다는 것입니다.

Answer 2

이 주제는 전에 제기되었습니다. 다음에서 제안 사항을 확인하십시오. Using more than one controller with ExtJS 4 MVC