extjs - 如何从另一个控制器或闭包正确调用控制器方法 [英] extjs - how correctly call a controller method from another controller or closure
问题描述
我是新的extjs，我使用MVC架构。
I'm new to extjs and I'm using the MVC architecture.
当我的应用程序引用控制器的方法，我这样做 MyApp.Application ）：
When my application references a method of a controller, I do it that way (in MyApp.Application):
Mb.app.getController('Main').myMethod();
已经很长了，但我认为这是办法。
It is already long, but I think this is the way to do.
当控制器在闭包中调用它自己的方法时，我被引导使用这个代码（在 MyApp.controller.Main ：
When a controller calls it's own method in a closure, I was led to use this code (in 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()}
})
)
})
})
})
},
我引用了 MyApp.app.getController（'Main'）的方法controllerMethodTwo ）因为这个不是指向闭包中的控制器对象，因此 this..controllerMethodTwo（）不起作用。
I referenced the method with MyApp.app.getController('Main').controllerMethodTwo() because this is not refering to the controller object in the closure, and thus this..controllerMethodTwo()isn't working.
我发现这个完全复杂，我希望有人有一个想法，以解决 MyApp。 app.getController - 工作环境。
I find this utterly convoluted, and I hope someone has an idea to get around that MyApp.app.getController-workaround.
感谢所有建议可以优化我的代码，并提出：
Thanks to all the suggestion I could optimize my code and came up with:
// 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){
...
}
});
推荐答案
实际上，至少有四个截然不同的问题您的代码：
Actually, there are at least four distinctly different problems in your code:
- 类内方法调用的范围处理
- 组件创建无效
- 控制器中的组件事件处理
- 控制器间通信
- Scope handling for intra-class method calls
- Component creation inefficiency
- Component event handling in a controller
- Inter-controller communication
第一个可以通过使用闭包来解决，或者通过将scope参数传递到Ajax请求，如上所述的@kevhender。鉴于此，我主张写更清晰的代码：
The first one is solved either by using a closure, or passing in the scope parameter to Ajax request, as @kevhender described above. Given that, I'd advocate writing clearer code:
controllerMethodOne: function() {
Ext.Ajax.request({
url: ...,
params: ...,
scope: this,
success: this.onMethodOneSuccess,
failure: this.onMethodOneFailure
});
},
// `this` scope is the controller here
onMethodOneSuccess: function(response) {
...
},
// Same scope here, the controller itself
onMethodOneFailure: function(response) {
...
}
组件创建
创建菜单项的方式效率不高，因为 菜单项将被创建并逐个呈现到DOM。这是几乎没有必要，你有前面的项目列表，你在控制，所以让我们保持代码漂亮和声明，以及一次创建所有的菜单项：
Component creation
The way you create menu items is less than efficient, because every menu item will be created and rendered to the DOM one by one. This is hardly necessary, either: you have the list of items upfront and you're in control, so let's keep the code nice and declarative, as well as create all the menu items in one go:
// I'd advocate being a bit defensive here and not trust the input
// Also, I don't see the `list` var declaration in your code,
// do you really want to make it a global?
var list, items;
list = Ext.JSON.decode(response.responseText);
items = Ext.Array.map(list, function(item) {
return {
xtype: 'menuitem',
text: item.text
}
});
// Another global? Take a look at the refs section in Controllers doc
storeMenu.add(items);
这里有什么变化是我们迭代列表并创建一个新的即将成为菜单项声明的数组。然后我们一次性添加它们，节省了大量的资源来重新渲染和重新布局你的 storeMenu 。
What changes here is that we're iterating over the list and creating a new array of the soon-to-be menu item declarations. Then we add them all in one go, saving a lot of resources on re-rendering and re-laying out your storeMenu.
对所有菜单项设置一个处理程序函数是完全不必要的，控制器。当点击菜单项时，它会触发一个点击事件 - 所有你需要做的是连接你的控制器来收听这些事件：
It is completely unnecessary, as well as inefficient, to set a handler function on every menu item, when all this function does is call the controller. When a menu item is clicked, it fires a click event - all you need to do is to wire up your controller to listen to these events:
// Suppose that your storeMenu was created like this
storeMenu = new Ext.menu.Menu({
itemId: 'storeMenu',
...
});
// Controller's init() method will provide the wiring
Ext.define('MyController', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
// This ComponentQuery selector will match menu items
// that descend (belong) to a component with itemId 'storeMenu'
'#storeMenu menuitem': {
click: this.controllerMethodTwo
}
});
},
// The scope is automatically set to the controller itself
controllerMethodTwo: function(item) {
...
}
});
一个最佳实践是将ComponentQuery选择器编写为细粒度可行的，因为它们是全局的
One best practice is to write the ComponentQuery selectors as finely grained as feasible, because they're global and if you're not precise enough your controller method may catch events from unwanted components.
这可能是一个有点牵强在目前，但由于你使用Ext JS 4.2，你可以利用我们在这方面增加的改进。 4.2之前，从另一个控制器调用一个控制器的方法有一个首选（也是唯一）方法：
This is probably a bit far fetched at the moment, but since you're using Ext JS 4.2 you may as well take advantage of the improvements we've added in that regard. Before 4.2, there was a preferred (and only) approach to call one controller's methods from another controller:
Ext.define('My.controller.Foo', {
extend: 'Ext.app.Controller',
methodFoo: function() {
// Need to call controller Bar here, what do we do?
this.getController('Bar').methodBar();
}
});
Ext.define('My.controller.Bar', {
extend: 'Ext.app.Controller',
methodBar: function() {
// This method is called directly by Foo
}
});
在Ext JS 4.2中，我们添加了事件域的概念。这意味着现在控制器不仅可以监听组件的事件，还可以监听其他实体事件。包括自己的控制器域：
In Ext JS 4.2, we've added the concept of event domains. What it means is that now controllers can listen not only to component's events but to other entities events, too. Including their own controller domain:
Ext.define('My.controller.Foo', {
extend: 'Ext.app.Controller',
methodFoo: function() {
// Effectively the same thing as above,
// but no direct method calling now
this.fireEvent('controllerBarMethodBar');
}
});
Ext.define('My.controller.Bar', {
extend: 'Ext.app.Controller',
// Need some wiring
init: function() {
this.listen({
controller: {
'*': {
controllerBarMethodBar: this.methodBar
}
}
});
},
methodBar: function() {
// This method is called *indirectly*
}
});
这可能看起来像一个更复杂的方式来做事情，但实际上它更容易使用在大型（ish）应用程序中，它解决了我们所遇到的主要问题：不再需要控制器之间的硬绑定，你可以测试每个控制器与其他人隔离。
This may look like a more convoluted way to do things, but in fact it's a lot simpler to use in large(ish) apps, and it solves the main problem we've had: there is no need for hard binding between controllers anymore, and you can test each and every controller in isolation from others.
在我的博客文章中查看更多内容： Ext JS中的Controller事件4.2
See more in my blog post: Controller events in Ext JS 4.2
这篇关于extjs - 如何从另一个控制器或闭包正确调用控制器方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
