Architektura ExtJS dla aplikacji wielostronicowej

Question

Mam aplikację .NET, w której większość interfejsu jest niestandardowa. Na niektórych stronach używam komponentów ExtJS4, takich jak siatka, aby wyświetlić na przykład tabelę użytkowników. Mam również inną stronę, na której wyświetlam profil użytkownika, oraz inną stronę, na której wyświetlam formularz wniosku. Istnieje wiele innych stron, które nie używają ExtJS. Rzadko używam komponentów ExtJS i chciałbym mieć kod wielokrotnego użytku dla sklepów i modeli na wszystkich stronach, na których używam ExtJS.

Jestem zaznajomiony z architekturą ExtJS MVC, ale cała dokumentacja i przykłady demonstrują najlepsze praktyki dla pojedynczej strony aplikacji ExtJS.

Dla mojego scenariusza szukałem porady, jaki jest najlepszy sposób na zaprojektowanie kodu ExtJS.

Czy powinienem po prostu utworzyć Sklepy i Modele we wspólnym pliku JavaScript i dołączyć ten plik na każdej stronie? Następnie utwórz instancję Ext.Application lub Ext.onReady dla każdej strony, której chciałbym użyć komponentów ExtJS? Czy powinienem zasadniczo używać architektury MVC dla każdej strony, o której mowa, tylko dla kilku komponentów?

Po prostu chcę uniknąć kopiowania/wklejania kodu i mieć możliwość ponownego użycia. Proszę polecić najlepszą ścieżkę do podjęcia.

Answer 1

Znalazłem odpowiednie rozwiązanie, które moim zdaniem działa dobrze.

Na moim szablonu strony załadować Ext JS wymagane pliki i korzystać Loader.setConfig określić lokalizację ExtJS MVC strukturę folderu:

<link href="<path>/ext-all.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="<path>/bootstrap.js" charset="utf-8"></script> 
<script type="text/javascript"> 
    Ext.Loader.setConfig({ 
     enabled: true, 
     paths: { 
      'GS': '<path>/extjs/app") %>' 
     } 
    }); 
</script> 

Wtedy w moim folderze app, mam następującą strukturę folderów:

app/ 
    Models/ 
     User.js 
     MyOtherModel.js 

Mój użytkownik.plik js zawiera:

Ext.define('GS.Model.SimpleUser', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'UserID', type: 'int' }, 
      { name: 'Username', type: 'string' }, 
      { name: 'Firstname', type: 'string' }, 
      { name: 'Lastname', type: 'string' }, 
      { name: 'Email', type: 'string' } 
     ], 
     idProperty: 'UserID' 
    }); 

Następnie na każdej stronie używam ExtJS, po prostu to model poprzez Ext.requires:

Ext.require([ 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.util.*', 
     'Ext.state.*', 
     'Ext.toolbar.Paging', 
     'Ext.tip.QuickTipManager', 
     'GS.Model.SimpleUser' 
    ]); 

    Ext.onReady(function() { 
     //app code here 
    }); 

Dzięki tej metodzie można napisać kod wielokrotnego użytku, takie jako modele i kontrolery i nie muszą iść pełną MVC z pojedynczą rzutnią.

Answer 2

Musiałem stworzyć aplikację zawierającą kilka stron, które nie były komponentami ExtJS. Dla mnie było to około 50/50, więc trochę więcej ExtJS niż twoje. Wielokrotne instancje aplikacji Ext.Application nie działały, gdy próbowałem, ze względu na sposób powiązania widoku.

Skończyło się na użyciu jednego Ext.Application z pojedynczym rzutni (co jest miłe dla zarządzania rozmiarem), stworzyłem widok "proxy" Ext.panel.Panel dla innych stron (innych niż ExtJS) i zrzuciłem zawartość strony w konfiguracji tego panelu, gdy html konfiguracja została wykonana przy użyciu serwletu - nie chciałem używać ramek IFrame, ale przypuszczam, że może to być inna opcja.

To mi się bardzo dobrze sprawdziło i mogłem skorzystać z osiągnięć MVC.

Answer 3

Najnowsza wersja programu Sencha Cmd wyraźnie obsługuje tworzenie i wdrażanie multi-page application. Jeśli twoje zależności są poprawnie skonfigurowane, możesz tworzyć pakiety budujące specyficzne dla strony, aby zoptymalizować ładowanie i buforowanie na stronę. Chociaż z praktycznego punktu widzenia, jeśli ilość nakładającego się kodu jest wystarczająco duża (i/lub całkowita ilość kodu jest wystarczająco mała), może być lepiej KISS i po prostu uwzględnić wszystkie klasy aplikacji w jednym pliku.

Tak, każda strona korzystająca z Ext powinna zazwyczaj używać Ext.onReady lub Ext.application do pakowania kodu aplikacji. To, czy podążasz za wzorcem MVC, zależy od Ciebie i zależy od wymagań i złożoności Twojej aplikacji. W prostych przypadkach często nie jest to pożądane, ale w przypadku złożonych aplikacji lub rozwoju zespołu prawdopodobnie ma to związek z MVC.