web-dev-qa-db-ja.com

コントローラーからビューをロードするExtjs 4 MVC

わかりましたので、ビューをロードするメソッドを備えたコントローラーがあります。

  1. コントローラからビューをロードするにはどうすればよいですか？
  2. ロードするときに、コントローラーからビューにいくつかのパラメーターを渡すにはどうすればよいですか？

どんな助けでも大歓迎です。

model-view-controllerextjs
18
Rob P.

ビューをロードするには、Ext.widget()を使用できます。 Ext.define()を使用して、ビューファイルにビューを作成します。 aliasプロパティを使用して、ビューのインラインxtypeを定義することをお勧めします。

ビューをロードする必要がある場合は、Ext.widget()を使用してビューを作成し、xtype（ビューのエイリアス）を指定します。次に例を示します。

 // define a window
 Ext.define('MyApp.view.user.Add',
    extend: 'Ext.window.Window',
    alias : 'widget.adduser',
    .
    . // Add other properties, custom properties, methods, event handlers etc..
 });

ここで、ユーザーコントローラーでインスタンスを作成する場合は、次のようにします。

// create an instance
 var view = Ext.widget('adduser'); // refer the below note!

注：「ウィジェット」がないことに注意してください！渡したウィジェット名に自動的に追加されます。

次に、パラメーターの受け渡しについて説明します。 Ext.createメソッドと同様に、次のようにパラメーターを渡すことができます。

 // create an instance with params
 var view = Ext.widget('adduser', {title: 'New User title'});

refについて：refは、ページ上のビューへの参照を取得するのに役立ちます。インスタンスの作成やビューの読み込みには役立ちません。ビューをレンダリングしている場合は、refシステムを利用してそのインスタンスを取得し、ビューを操作できます。ビューの参照を取得するには、 ComponentQuery を使用する必要があります。

26
Abdel Raoof

refs canを使用して、新しいインスタンスを作成し、既存のインスタンスにアクセスします。オプションautoCreate: trueを参照に追加することにより、ゲッターへの呼び出しは、既存のコンポーネントがセレクターと一致しない場合、構成として参照定義を使用して新しいインスタンスを作成します。

refs: [{
    ref: 'list'
    ,selector: 'myusersgrid#users'
    ,autoCreate: true

    // any additional options get passed as config when an instance needs to be created
    ,xtype: 'myusersgrid'
    ,itemId: 'users'
    ,store: 'Users'
    ,title: 'Users'
},{
    ref: 'otherList'
    ,selector: 'myusersgrid#administrators'
    ,autoCreate: true

    // any additional options get passed as config when an instance needs to be created
    ,xtype: 'myusersgrid'
    ,itemId: 'administrators'
    ,store: 'SpecialUsers'
    ,title: 'Special Users'
}],

＃を使用してitemIdをさらに一致させているため、同じxtypeの複数のインスタンスへの参照を持つことができます。

forceCreate: trueオプションもあり、refのゲッターがalwaysによって新しいインスタンスを返します。autoCreateを使用しないと、初めてインスタンスが1つ作成されます取得し、同じものを返し続けます。

22
The Mighty Chris

質問を理解したら、refsを使用したいと思います。Ext.app.Controllerのドキュメントをご覧ください。 http://dev.sencha.com/deploy/ext-4.0.0/docs/ api/Ext.app.Controller.html

基本的には、CSSセレクターを使用して参照のリストを作成します。

refs: [
    {
        ref: 'list',
        selector: 'grid'
    }
],

次に、クラスの後半でgetを使用してこの参照にアクセスできます。

refreshGrid: function() {
    this.getList().store.load();
}

Getlist（）メソッドは、 'list'への参照を作成するときに作成されます。

6
joekrell

私はこれと同じ問題に遭遇しました。抽象基本コントローラー上にビューインスタンスを取得するメソッドを作成し、それが存在しない場合は作成しました。

これは、ビューが破棄された後でも正しく機能します-新しいビューが作成されます。

Ext.define('My.controller.Base', {
    extend: 'Ext.app.Controller',

    //Retrieves an instance of the top-level view
    //If it has not been created yet than one is instantiated
    //Also, overrides the .close() method on the view to 
    //null out the instance reference on the controller (very necessary)
    getViewInstance: function () {
        var self = this;

        if(!this.viewInstance) {
            if(this.views && this.views.length) {

                var view = this.getView(this.views[0]);

                this.viewInstance = view.create();

                this.viewInstance.close = function () {
                    view.prototype.close.apply(this, arguments);
                    self.viewInstance = null;
                };

            } 
        }

        return this.viewInstance;
    }
});

これで、私のすべてのコントローラーは、外部変数なしのw/iコントローラーコードから簡単にビューにアクセスできます。

2
John Strickler

使用Ext.create（ '開く適切なファイル名'、param1 = me）;

新しく作成されたビューで、this.param1を使用してパラメーターにアクセスします。

EG：Ext.create（ 'view.HelloOverlay、param1 = "Hello"、param2 = "World"）; HelloOverlayのコントローラーで、this.param1を使用すると、 "Hello"とthis.param2が得られます「世界」を与えます。

渡されたパラメータがビューに存在する場合があるため、this.getView（）。paramNameを使用します

0
Mano Aravindhan