複数ページアプリケーションのためのExtJSアーキテクチャ

Question

私は、ほとんどのUIがカスタムである.NETアプリケーションを持っています。いくつかのページでは、GridなどのExtJS4コンポーネントを使用して、たとえばUsersのテーブルを表示しています。また、私はユーザープロファイルを表示する別のページと、アプリケーションフォームを表示する別のページを持っています。 ExtJSを使用しない他の多くのページがあります。私は控えめにExtJSコンポーネントを使用しており、ExtJSを使用するすべてのページにわたってストアとモデル用に再利用可能なコードを持ちたいと考えています。

私はExtJS MVCアーキテクチャに精通していますが、すべてのドキュメントと例は、ExtJSアプリケーションの単一ページのベストプラクティスを示しています。

私のシナリオでは、ExtJSコードを設計する最善の方法についてアドバイスを探していました。

ストアとモデルを共通のJavaScriptファイルで作成し、そのファイルをすべてのページに含めるだけでよいですか？ ExtJSコンポーネントを使用したいすべてのページに対して、Ext.ApplicationまたはExt.onReadyのインスタンスを作成しますか？または、私は本質的に、問題の各ページに対して、いくつかのコンポーネントのMVCアーキテクチャを使用する必要がありますか？

私は、コードのコピー/貼り付けを避け、再利便性を持っています。ベストパスをお勧めします。

Answer 1

私は、うまくいくと思う適切な解決策を見つけました。私のページテンプレートで

私はのExt JSファイルを必要なロードとExtJSのMVCのフォルダ構造の場所を指定するLoader.setConfigを使用します。

<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> 

はその後、私のアプリのフォルダに、私は、次のフォルダ構造を持っている：

app/ 
    Models/ 
     User.js 
     MyOtherModel.js 

マイユーザー。JSファイルが含まれています

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

その後、私はExtJSにを使用していますすべてのページに、私はちょうど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 
    }); 

を、私は再利用可能なコードなど書くことができますモデルとコントローラとして使用でき、単一のビューポートで完全なMVCにする必要はありません。

Answer 2

ExtJSコンポーネントではない複数のページを含むアプリケーションを作成する必要がありました。私にとっては50/50程度だったので、ExtJSはあなたのものより少し大きかった。私が試したときに、ビューポートがどのようにそれに縛られていたかに起因して、複数のExt.Applicationのインスタンスが動作しませんでした。

Ext.Applicationを1つのビューポート（サイズ変更管理に最適）で1つ使用してしまったので、他の（ExtJS以外の）ページの "proxy" Ext.panel.Panelビューを作成しました。このパネルのhtmlコンフィグレーションにサーブレットを使ってレンダリングしたとき - 私はIFrameを使いたくなかったが、別のオプションかもしれないと思う。

これはうまくいきました。このようなMVCアーキテクチャーを利用することができました。

Answer 3

Sencha Cmdの最新バージョンは、明示的にmulti-page applicationの開発と展開をサポートしています。依存関係が適切に設定されている場合は、ページごとのロードとキャッシュを最適化するためのページ固有のビルドパッケージを作成できます。実用的な観点からは、オーバーラップするコードの量が十分に多い（および/またはコードの総量が十分に少ない）場合は、KISSより優れていて、すべてのアプリケーションクラスを1つのファイルに含めることができます。

はい、Extを使用する各ページでは、通常、Ext.onReadyまたはアプリケーションコードをラップするExt.applicationを使用する必要があります。 MVCパターンに従うかどうかはあなた次第であり、アプリの必要条件と複雑さによって決まるはずです。単純なケースでは、それほどメリットはありませんが、複雑なアプリケーションやチーム開発では、おそらくMVCに従うのが理にかなっています。