6

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

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

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

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

コードのコピー/貼り付けを避け、再利用できるようにしたいだけです。最適なパスをお勧めします。

4

3 に答える 3

3

ExtJS コンポーネントではないいくつかのページを含むアプリケーションを作成する必要がありました。私にとっては約50/50だったので、あなたのものより少しExtJSが多かった. Ext.Application の複数のインスタンスは、ビューポートが関連付けられているため、試してみると機能しませんでした。

最終的に、単一のビューポートを持つ 1 つの Ext.Application を使用することになり (これはサイズ変更管理にExt.panel.Panel適しています)、他の (非 ExtJS) ページ用の「プロキシ」ビューを作成し、ページのコンテンツをこのパネルの構成にダンプしましhtmlた。サーブレットを使用してレンダリングされました-IFramesを使用したくありませんでしたが、別のオプションになる可能性があると思います。

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

于 2013-03-05T20:14:10.297 に答える
2

だから私は私がうまくいくと信じている適切な解決策を見つけました。

私のページテンプレートで、Ext JSに必要なファイルをロードし、Loader.setConfigを使用してExtJSMVCフォルダー構造の場所を指定します。

<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

私のUser.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を実行する必要がありません。

于 2013-03-07T19:28:53.157 に答える
1

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

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

于 2013-03-06T02:49:08.650 に答える