Ext.Ajax.request 中的 javascript 范围问题答案

【问题标题】：javascript Scope issue in Ext.Ajax.requestExt.Ajax.request 中的 javascript 范围问题
【发布时间】：2011-09-18 06:57:49
【问题描述】：

我有这个类可以自动从服务器生成 JSON 存储。商店是动态创建的，并且可以在 Firebug 的 DOM 中查看。我想我有一些范围问题。当我想在 Ext.Ajax.request 的回调函数中使用 console.log(Ext.getStore('AdminSettings')) （其中 AdminSettings 是创建的商店之一）时，'AdminSettings' 商店被返回，但如果我将 console.log(Ext.getStore('AdminSettings')) 放在回调函数之外的任何地方，我会在 firebug 中收到未定义的消息，并且我的商店没有实例化。请参阅代码 cmets 以查看它的实际效果。

Ext.Ajax.request({
url : './account/getadminstores',
callback : function(options, success, response) {
var json = Ext.decode(response.responseText);
var adminStores = new Array();
// setup and intitialize on the fly stores
for ( var key1 in json) {
var storeFields = new Array();
for ( var key2 in json[key1]) {// if (i==1){break;}
for ( var key3 in json[key1][key2]) {
storeFields.push(key3);}
break;};
Ext.define('MA.store.' + key1, {
extend : 'Ext.data.Store',
fields : storeFields,
storeId : key1,
data : json[key1]
});
Ext.create('MA.store.'+key1);};
console.log(Ext.getStore('AdminSettings'));
//returns MA.store.AdminSettings in firebug and everything is fine 
                }
            });//eof Ext.Ajax.request
            console.log(Ext.getStore('AdminSettings'));
//returns undefined which is strange

【问题讨论】：

标签： javascript extjs scope extjs4

【解决方案1】：

Ext.Ajax.request 是异步的。您的最终 console.log 调用没有返回任何内容，因为在执行它时请求尚未完成。任何取决于请求回调结果的代码也需要由回调执行。

【讨论】：

我让你了解异步的东西。你能提供一个解决方案吗？我应该使用同步调用吗？这样的东西存在吗？我有一个视口和一个网格，我会尽快需要商店当页面加载时，如果不是网格的存储将是未定义的。
将网格的初始化代码包装在一个函数中，该函数可以从 Ext.Ajax.request 的回调中调用。在网格准备好之前，您可能需要使用卡片布局等作为占位符。也就是说，如果您的页面如此依赖于请求的结果，那么您最好将数据作为页面本身的一部分交付给客户端，以便立即使用。

【解决方案2】：

这是由于 javascript 的异步特性，callback 直到 ajax 请求完成后才会被调用，因此也没有定义 Ext 数据存储。

你的脚本的执行顺序是：

Ajax 请求已初始化
console.log 已执行（未定义，因为尚未定义数据存储）
javascript 正在等待来自 ./account/getadminstores 的 ajax 响应
响应进来，回调函数被调用（定义了数据存储）

【讨论】：

关于如何在 ajax 请求完成之前暂停渲染小部件的任何解决方案？