如何在ExtJS 6 Controller中设置范围传递给ajax.request(How to set scope in ExtJS 6 Controller passing to ajax.req

如何在ExtJS 6 Controller中设置范围传递给ajax.request(How to set scope in ExtJS 6 Controller passing to ajax.request)

这里引用的小提琴和代码实际上并不起作用。我不知道如何在一个文件项目中定义控制器。无论如何，我的问题是当我处于控制器功能时（在我的情况下是后悔）。我无法弄清楚如何获得testval的引用。如果我在一个单独的启动中创建一个只有19-32行的简单示例就可以了（参见小提琴： https ： //fiddle.sencha.com/#fiddle/1ae7 ）。

但是，在我的控制器案例中，我没有在成功或失败事件中获得testval。如何传递我的函数的上下文（范围）我正在调用ajax请求？

https://fiddle.sencha.com/#fiddle/1ae9

Ext.define('mycontroller', { extend: 'Ext.app.Controller', alias: 'controller.main', myfun: function() { console.log('controller:myfun'); } }); var mypanel = Ext.create('Ext.panel.Panel', { controller: { type: 'main' }, listeners: { afterrender: function() { console.log('afterrender'); var testval = "hi there"; Ext.Ajax.request({ method: 'POST', url: '/dummy', jsonData: 'jsonData', scope: this, success: function() { // this never gets called, just testing scope }, failure: function() { // testval IS NOT IN SCOPE, CONFUSED ABOUT SCOPE AND THIS HERE Ext.Msg.alert('info', testval); } }); } }, html: 'test panel' }); Ext.application({ name: 'Fiddle', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [mypanel] }); } });

The referenced fiddle and code here does not actually work. I don't know how to get a controller defined in a one file project. At any rate, my issue is that when I'm in a controller function (afterrender in my case). I can't figure out how to get a reference to testval. if I create a simple example with just lines 19-32 in a separate launch it works (see fiddle: https://fiddle.sencha.com/#fiddle/1ae7 ).

However, in my controller case I'm not getting the testval in my success or failure event. how to pass in context (scope) of my function I'm calling the ajax request from?

https://fiddle.sencha.com/#fiddle/1ae9

Ext.define('mycontroller', { extend: 'Ext.app.Controller', alias: 'controller.main', myfun: function() { console.log('controller:myfun'); } }); var mypanel = Ext.create('Ext.panel.Panel', { controller: { type: 'main' }, listeners: { afterrender: function() { console.log('afterrender'); var testval = "hi there"; Ext.Ajax.request({ method: 'POST', url: '/dummy', jsonData: 'jsonData', scope: this, success: function() { // this never gets called, just testing scope }, failure: function() { // testval IS NOT IN SCOPE, CONFUSED ABOUT SCOPE AND THIS HERE Ext.Msg.alert('info', testval); } }); } }, html: 'test panel' }); Ext.application({ name: 'Fiddle', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [mypanel] }); } });

最满意答案

您必须在基本的JS结构中思考以找到范围。基本结构是函数Ext.Ajax.request() ，在这种情况下它采用一个（！）参数。

该单个参数是一个对象。 如果您在对象内部使用this ， this指的是该对象。 Sencha用于将外部范围转移到函数中的模式将是

var me = this; Ext.Ajax.request({ ... scope: me, ... });

也就是说， var testvar是一个局部变量，它没有作用于任何对象 - 它的作用域是功能块。

var testval = "hi there"; Ext.Ajax.request({ failure: function() { // testval IS ALWAYS "IN SCOPE" HERE, NO MATTER WHAT YOU SET scope TO, // BECAUSE IT IS DEFINED INSIDE THE SAME FUNCTION BLOCK Ext.Msg.alert('info', testval); } });

也就是说，通过修复我在浏览器控制台中找到的错误，我为你做了一个工作小提琴。

You have to think in basic JS structures to find the scope. The basic structure is a function Ext.Ajax.request(), which takes one(!) parameter in this case.

That single parameter is an object. If you are using this inside an object, this refers to that very object. The pattern used by Sencha to transfer the outer scope into the function would be

var me = this; Ext.Ajax.request({ ... scope: me, ... });

That said, var testvar is a local variable, which is not scoped into any object - it is scoped to the function block.

var testval = "hi there"; Ext.Ajax.request({ failure: function() { // testval IS ALWAYS "IN SCOPE" HERE, NO MATTER WHAT YOU SET scope TO, // BECAUSE IT IS DEFINED INSIDE THE SAME FUNCTION BLOCK Ext.Msg.alert('info', testval); } });

That said, I have made a working fiddle for you by just fixing the error I found in browser console.

更多推荐