extjs - comment appeler correctement une méthode de contrôleur à partir d'un autre contrôleur ou d'une fermeture
Je suis nouveau sur extjs et je suis en utilisant l'architecture MVC.
Lors de ma demande fait référence à une méthode d'un contrôleur, je le fais de cette façon (en MyApp.Application
):
Mb.app.getController('Main').myMethod();
C'est déjà long, mais je pense que c'est la façon de le faire.
Quand un contrôleur d'appels c'est une méthode propre à une fermeture, j'ai été amené à utiliser ce code (dans MyApp.controller.Main
:
controllerMethodOne: function(){
Ext.Ajax.request({
url: ...,
params: ...,
success: (function(response){
list = Ext.JSON.decode(response.responseText);
list.forEach(function(item){
storeMenu.add(
Ext.create('Ext.menu.Item', {
text: item.text,
handler: function(el){MyApp.app.getController('Main').controllerMethodTwo()}
})
)
})
})
})
},
Que j'ai référencé la méthode avec MyApp.app.getController('Main').controllerMethodTwo()
parce que this
ne se rapporte pas à l'objet de contrôleur de la fermeture, et donc this..controllerMethodTwo()
ne fonctionne pas.
Je trouve cela totalement alambiquée, et j'espère que quelqu'un a une idée pour contourner MyApp.app.getController
-solution de contournement.
Mise à jour
Merci à tous de la suggestion, j'ai pu optimiser mon code et est venu avec:
//in my controller
mixins: ['Mb.controller.mixin.StoreMenu'],
//I use that style of menus in two controllers thats why I use a mixin
init: function() {
this.control({
'#vg_storeMenu menuitem': {
click: this.onStoreMenuClicked
}
})
},
//the controller mixin
Ext.define('Mb.controller.mixin.StoreMenu', {
extend: 'Ext.app.Controller',
buildStoreMenu: function(store_name){
var storeMenu = Ext.ComponentQuery.query('#' + store_name + 'Menu')[0];
Ext.Ajax.request({
url: Paths.ajax + 'json.php',
params: {list: store_name + 's'},
success: (function(response){
list = Ext.JSON.decode(response.responseText);
items = Ext.Array.map(list, function(item) {
return {
xtype: 'menuitem',
text: item.text
}
});
storeMenu.add(items);
})
})
},
onStoreMenuClicked: function(el){
...
}
});
source d'informationauteur Lorenz Meyer | 2013-10-08
Vous devez vous connecter pour publier un commentaire.
En fait, il y a au moins quatre nettement différents problèmes dans votre code:
Portée de manutention
La première est résolu soit par l'aide d'une fermeture, ou en passant dans le champ de paramètre de requête Ajax, comme @kevhender décrit ci-dessus. Étant donné que, j'avais l'avocat de l'écriture de code plus clair:
De la création de composant
La façon dont vous créez des éléments de menu est moins efficace, car chaque élément de menu sera créé et rendu à la cathédrale, un par un. Ce n'est guère nécessaire, soit: vous disposez de la liste des articles à l'avance et que vous êtes en contrôle, alors gardons le code de nice et déclarative, ainsi que de créer tous les éléments de menu en une seule fois:
Ce qui change ici, c'est que nous sommes une itération sur la
list
et la création d'un nouveau tableau de le bientôt-à-être l'élément de menu déclarations. Puis nous ajouter en une seule fois, économisant ainsi beaucoup de ressources sur le re-rendu et de re-pose sur votrestoreMenu
.Composante même de manutention
Il est complètement inutile, ainsi que la médiocrité, de définir une fonction de gestionnaire sur chaque élément de menu, quand cette fonction ne fait qu'appeler le contrôleur. Lorsqu'un élément de menu est cliqué, il déclenche une
click
événement - tout ce que vous devez faire est de connecter votre contrôleur à l'écoute de ces événements:Une bonne pratique consiste à écrire le ComponentQuery sélecteurs finement grainé que possible, parce qu'ils sont mondiaux et si vous n'êtes pas assez précis de votre méthode de contrôleur peut capturer des événements des composants.
Inter-contrôleur de communication
C'est probablement un peu tiré par les cheveux pour le moment, mais puisque vous êtes à l'aide de Ext JS 4.2 vous pouvez ainsi profiter des améliorations que nous avons ajouté, à cet égard. Avant 4.2, il a été un préféré (et unique) approche pour appeler un contrôleur de méthodes à partir d'un autre contrôleur:
Ext JS 4.2, nous avons ajouté le concept de l'événement domaines. Ce que cela signifie, c'est que maintenant, les contrôleurs peuvent écouter non seulement de la composante événements, mais à d'autres entités, événements, trop. Y compris leur propre contrôleur de domaine:
Cela peut ressembler à un plus alambiqué façon de faire les choses, mais en fait c'est beaucoup plus simple à utiliser dans les grandes(ish) des applications, et il résout le problème principal que nous avons eu: il n'est pas nécessaire pour les durs de la liaison entre les contrôleurs, et de plus, vous pouvez tester chaque contrôleur d'isolement des autres.
Voir plus de mon blog: Les événements de contrôleur de Ext JS 4.2
this
ne fonctionne pas dans lesuccess
de rappel car il n'a pas le droit de la portée. Votre 2 options sont les suivantes:1: Créer une variable au début de la fonction de référence dans le rappel:
2: Utilisation de la
scope
config de laExt.Ajax.request
appel: