6

Sencha Cmd を使用してワークスペースを生成し、2 つの異なるアプリを作成した後、最初のアプリを実行したいだけで、ボタンをクリックした後、2 番目のアプリを呼び出します :) メイン アプリが別のサブアプリを呼び出すようにする方法がありますそれ ？あなたの助けをthx

4

2 に答える 2

19

問題なく連携できる個別のモジュールを開発できます。両方の概念はまったく矛盾していません。

ここで私の経験を共有させてください。現在のプロジェクトを（ゼロから）開始したとき、他の2つのチームが別の2つのアプリケーションを開発していました。しばらくすると、それらを1つの大きなアプリに「統合」する必要があります。最終結果を予測するのに天才である必要はありませんよね？顧客がより多くの並列作業（モジュールを開発するより多くのチーム）を望んでいると聞いたとき、事態はさらに悪化しました。

最初のアイデアはiframeを使用することでしたが、PoCはそれが悪いアイデアであることを示したため、マシンを停止してプラグイン可能なアーキテクチャの設計を開始しました。現在、分離された方法で開発されたモジュール（プラグインと呼んでいます）を簡単にロードできるため、うまくいきました。たとえば、フォルダ構造がどのようになっているのかを見てみましょう。

ここに画像の説明を入力してください

これは、ロードするモジュールを設定するメタデータです。 ここに画像の説明を入力してください

これには多くの利点があります。

  • モジュールは並行して開発できます。
  • モジュールは分離してテストできます。
  • モジュールは動的にロード、有効化または無効化できます

もちろん、これはextjsがすぐに提供するものではありませんが、価値があるので実行できます。

つまり、簡単に言えば、問題はアプリケーションのサイズではなく、その構造にあります。私たちと同じように、カスタムフォルダー構造で推奨されるMVCパターンに従います。

アップデート：

プラグインのメタデータについて。アプリケーションのメインコントローラーには、プラグインをロードするという1つの責任しかありません。これは次のコードで行われます：

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を処理できるようになると、プロセスは終了します。
これは、「operations」プラグインのディスパッチャー構成です。

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メソッドです。

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

重要な点の1つは、プラグインには1つの共有コンポーネントへの参照しかありません。プラグインがレンダリングされる中央領域です。

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

この参照は、「AbstractPluginController」のサブクラスであるすべてのプラグインコントローラーに継承されます。モジュールがホスティング業者について知っているのはこれだけなので、これは重要です。そして、これが私たちが並行して開発できる理由です。

AbstractPluginControllerについて、この同じクラスには、すべてのプラグインコントローラーに役立ついくつかのコア機能があります。たとえば、必要なときにすべてのコントローラー/ビュー/モデルをロードするために、このクラスは次のように動的コントローラーのロードを実装します。

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. リンクを介したナビゲーション/コミュニケーション、主に
  3. メタデータを使用してホストによって実行される統合（プラグインは追加のメタデータも公開できます）
  4. コントローラーの遅延読み込み（コントローラーは独自のビューで何かを実行します）

これがあなたにアイデアを与えることを願っています。それらを統合するためのいくつかのトリックの詳細はたくさんありますが、基本的に、ここで示したいのは、モジュラーアプリケーションをextjsで開発できる（または開発する必要がある）ということです。

于 2012-12-19T02:27:24.820 に答える
0

この話題は以前にも取り上げました。ここで提案を確認してください: ExtJS 4 MVC で複数のコントローラーを使用する

于 2012-12-18T22:28:17.827 に答える