web-dev-qa-db-fra.com

Extjs 4 MVC chargeant une vue du contrôleur

Ok, donc j'ai un contrôleur avec une méthode dans laquelle je veux charger une vue. 

  1. Comment charger une vue à partir d'un contrôleur?
  2. Comment puis-je transmettre certains paramètres du contrôleur à la vue lorsque je le charge?

Toute aide est très appréciée.

model-view-controllerextjs
18
Rob P.

Pour charger une vue, vous pouvez utiliser Ext.widget(). Utilisez Ext.define() pour créer une vue dans votre fichier de vue. Je vous recommande d'utiliser la propriété alias pour définir un type xt en ligne pour la vue.

Lorsque vous devez charger la vue, créez une vue à l'aide de Ext.widget() et spécifiez le type xtype (alias de votre vue). Voici un exemple:

 // 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..
 });

Maintenant, quand vous voulez créer une instance dans votre contrôleur d’utilisateur, vous faites:

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

Note: notez qu'il n'y a pas de 'widget'! il est automatiquement ajouté au nom du widget que vous transmettez.

Passons maintenant aux paramètres de passage. Comme la méthode Ext.create, vous devriez être capable de passer tous les paramètres en tant que:

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

Concernant ref: les références vous aident à obtenir des références aux vues sur votre page. Ils ne permettent pas de créer une instance ou de charger une vue. Si votre vue est restituée, vous pouvez utiliser le système de référence pour mettre la main sur cette instance et manipuler la vue. Vous devez utiliser ComponentQuery pour obtenir la référence de votre vue. 

26
Abdel Raoof

refs can peut être utilisé pour créer de nouvelles instances et accéder aux instances existantes. En ajoutant l'option autoCreate: true à votre référence, un appel au getter entraînera la création d'une nouvelle instance à l'aide de la définition de référence comme configuration si aucun composant existant ne correspond au sélecteur.

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'
}],

Remarquez que l'utilisation de # correspond également à l'itemId afin que je puisse avoir des références à plusieurs instances du même type xt

Il existe également une option forceCreate: true qui obligera le getter always de la référence à renvoyer une nouvelle instance, sans elle, autoCreate créera une instance la première fois qu’elle sera récupérée, puis continuera à la renvoyer.

22
The Mighty Chris

Si je comprends votre question, je pense que vous souhaitez utiliser les références, consultez la documentation de Ext.app.Controller: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/ Ext.app.Controller.html

En gros, vous créez une liste de références à l'aide de sélecteurs css:

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

Ensuite, plus tard dans la classe, vous pourrez accéder à cette référence à l’aide de get, c’est-à-dire:

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

La méthode getList () est créée pour vous lorsque vous créez la référence à 'list'.

6
joekrell

J'ai rencontré ce même problème. J'ai créé une méthode sur mon contrôleur de base abstrait pour récupérer l'instance de vue et créer dessus si elle n'existe pas.

Cela fonctionnera correctement même après que la vue ait été détruite - un nouveau sera créé.

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

Désormais, tous mes contrôleurs peuvent facilement accéder à leur vue à partir du code de contrôleur sans variables externes. 

2
John Strickler

Utilisez Ext.create ('Nom de fichier correct à ouvrir', param1 = me);

Dans la vue nouvellement créée, utilisez this.param1 pour accéder aux paramètres.

EG: Ext.create ('view.HelloOverlay, param1 = "Bonjour", param2 = "Monde"); dans le contrôleur de HelloOverlay, utiliser this.param1 donnera "Hello" et this.param2 donnera "World".

Parfois, les paramètres passés seront présents dans la vue, utilisez donc this.getView (). ParamName

0
Mano Aravindhan