2012-12-18 7 views
6

po wygenerowaniu Workspace przy użyciu Sencha Cmd i utworzenia Dwie różne aplikacje, chcę tylko uruchomić pierwszą aplikację, a następnie po kliknięciu przycisku wywołuje drugą aplikację :) Like a main app wywoływanie innej sub-app czy jest na to sposób? thx za pomocAplikacja Extjs Po wywołaniu innego Extjsa APP

+0

jaki powinien być wynik? możesz wywołać usługę statyczną (aktualizacja coś w tym stylu) lub potrzebujesz miłej odpowiedzi? –

+0

Pierwsza aplikacja będzie pustym panelem i przyciskiem. Gdy kliknę przycisk, druga aplikacja zostanie załadowana na panelu (pierwszej aplikacji). –

Odpowiedz

18

Możesz opracować oddzielne moduły, które mogą współpracować bez żadnych problemów. Obie koncepcje wcale nie są w konflikcie.

Pozwól mi podzielić się moim doświadczeniem tutaj. Kiedy zaczynaliśmy w naszym obecnym projekcie (od zera), były jeszcze dwa zespoły opracowujące kolejne dwie aplikacje, które po pewnym czasie powinny "zintegrować" je w jednej dużej aplikacji. Nie musisz być geniuszem, aby przewidzieć końcowy wynik, prawda? Sytuacja pogorszyła się, gdy usłyszeliśmy, że klient chce równoległej pracy (więcej zespołów opracowujących moduły).

Pierwszy pomysł polegał na korzystaniu z elementów iframe, ale PoC wykazał, że był to zły pomysł, więc zatrzymaliśmy maszynę i zaczęliśmy projektować architekturę z wtyczkami. Zrobiliśmy to dobrze, ponieważ obecnie jesteśmy w stanie ładować moduły (nazywaliśmy to wtyczkami) w prosty sposób. Na przykład, przyjrzeć się w jaki sposób nasza struktura folderów wygląda następująco:

enter image description here

A to metadane, gdzie możemy ustawić moduły chcemy załadować: enter image description here

ta ma wiele zalet :

  • moduły mogą być realizowane równolegle,
  • moduły mogą być testowane pojedyncze,
  • moduły mogą być ładowane dynamicznie, włączone lub wyłączone

Oczywiście, nie jest to coś ExtJS zapewnia wyjęciu z pudełka, ale można to zrobić, bo warto.

Tak, krótka odpowiedź: Twój problem nie dotyczy rozmiaru aplikacji, lecz jej wzmocnienia. Postępuj zgodnie z zalecanym wzorcem MVC z niestandardową strukturą folderów, tak jak my.

Aktualizacja:

O metadanych wtyczek. Główny kontroler aplikacji ma tylko jedną odpowiedzialność: załaduj wtyczki. Odbywa się to z tym kodem:

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); 
    } 
}, 

i każdy plugin regulator pracuje jako dyspozytor, to znaczy, że jest składnikiem Historia słuchania URL (w pasku adresu), a gdy to się nie zmieni, iteracje wtyczki przez wtyczkę pytam do obsługi adresu URL. Proces kończy się, gdy wtyczka jest w stanie obsłużyć żądany adres URL.
To dyspozytora konfiguracja wtyczek do „operacji”:

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 
    }); 
} 

i jest to metoda nawigacja kodu klasy historia:

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'); 
    } 
}, 

Ważną kwestią jest wtyczek tylko odniesienie do jeden wspólny składnik: środkowy obszar, w którym są renderowane:

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

Odniesienie to jest dziedziczone przez wszystkie kontrolery wtyczek, które Ich są podklasami "AbstractPluginController". Jest to ważne, ponieważ jest to jedyna rzecz, o której moduły wiedzą o swoim gospodarzu. I dlatego możemy rozwijać się równolegle.

O AbstractPluginController, ta sama klasa ma kilka podstawowych funkcjonalności przydatnych dla wszystkich kontrolerów wtyczek, na przykład, aby załadować wszystkie swoje kontrolery/widoki/modele, gdy są wymagane, a nie wcześniej, ta klasa implementuje kontrolery dynamiczne ładuje się następująco:

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; 
}, 

to pozwala nam określić listę subcontrollers (bo główne kontrolery jest tylko inicjator i wysyłka) moduł ma, i pozwala nam tworzyć je na żądanie.

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

Podsumowując: myślę, że główne punkty są następujące:

  1. moduły nie masz nic wiedzieć na temat aplikacji hosta.
  2. nawigacja/komunikacja za pośrednictwem linków, głównie
  3. integracja wykonywane przez gospodarza za pomocą metadanych (wtyczek może wystawiać dodatkowe metadane zbyt)
  4. leniwe ładowanie sterowników (robią coś z własnych poglądów)

Mam nadzieję, że da ci to pomysł. Istnieje wiele detali i niektóre sztuczki, które je integrują, ale w zasadzie to, co chcę tutaj pokazać, to modułowa aplikacja, która może być (lub powinna) zostać opracowana za pomocą extjs przy odrobinie dodatkowego wysiłku.

+0

Intryguje mnie to, co tutaj zamieściłeś. Nie widziałem tak skonstruowanej modułowej aplikacji. Czy masz wpis na blogu na ten temat? – dbrin

+0

dziękuję za odpowiedź. Zrobiliśmy to z Iframe, tak jak wspomniałeś wcześniej. ale nie rozumiem, gdzie należy umieścić metadane? –

+0

Cóż, sądzę, że na podstawie tego przykładu architektura jest trudna do zrozumienia. Pomysł brzmi całkiem fajnie, jak wspomina @dbrin, ale nie będzie można go zastosować bez rdzenia architektury wtyczki lub przynajmniej bardziej szczegółowego opisu. W każdym razie punkt w tym kierunku wart jest +1 ** Edit ** * Jestem bardzo zainteresowany więcej informacji na ten temat! * – sra

Powiązane problemy