javascript - ExtJS:如何在 initComponent 方法中等待 Promise 响应?
问题描述
我已经实现了一种initComponent
方法来分类并通过方法Container
加载配置。items
Promise
期间的事情debugging
首先进入callParent
线路,然后执行进入Promise
方法。我必须重新加载浏览器才能获取Promise
响应。
我已经尝试过then()
方法initComponent
但给出了错误。我怎样才能达到这种用法?
- 容器类initComponent
;
Ext.define('MyApp.view.Bar', {
extend: 'Ext.container.Container',
xtype: 'barview',
requires: [],
controller: 'barctrl',
viewModel: {
type: 'barvm'
},
initComponent: function () {
let me = this;
let fooInfo = MyApp.FooInfoClass.getFooInfo(); //There is a debugger in FooInfoClass but miss this one
if (fooInfo) {
if (fooInfo.self) {
me.items = [
{
xtype: 'componentA'
}
];
} else if (fooInfo.reference) {
me.items = [
{
xtype: 'componentB'
}
];
} else {
me.items = [
{
xtype: 'componentC'
}
];
}
}
debugger //Firstly comes to this one then goes to Promise
me.callParent(arguments);
}
});
- Promise 类和方法;
Ext.define('MyApp.FooInfoClass', {
requires: [],
singleton: true,
endpoint: MyApp.Url(),
getFooInfo: function () {
let me = this;
let responseInfo = localStorage.getItem('foo-info');
return JSON.parse(responseInfo);
},
setFooInfo: function (foo) {
let me = this;
me.foo = JSON.stringify(foo);
localStorage.setItem(me.fooInfo, me.foo);
},
fooInfo: function () {
let me = this;
return new Ext.Promise(function (resolve, reject) {
Ext.Ajax.request({
url: me.endpoint + '/info',
success: function(response, opts) {
let obj = Ext.decode(response.responseText);
let data = obj.data[0];
debugger //Secondly comes to here!
me.foo = data;
me.setFooInfo(me.foo);
resolve(me.foo);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response);
reject(response);
}
});
});
}
});
解决方案
在获得所需数据之前,您不应推迟完成该initComponent
功能。您可以先获取数据并在所有需要的信息一起实例化组件(执行Ext.create()
inside Promise.then()
),或者让组件获取所需的信息并在运行时根据这些信息添加子组件。在致电之前,您真正必须callParent
知道的事情很少initComponent
。
如果我是你,而不是使用me.items =
,我只会使用me.add()
以便在初始化之后在运行时添加子组件。
我为你做了一个简单的小提琴:https ://fiddle.sencha.com/#view/editor&fiddle/2k9r
推荐阅读
- python - 在 ROBOT 测试框架中解析 JSON 关键元素中的 XML 内容时出错
- java - 使用node js + MySQL的具有n级子类别的类别
- javascript - 在 vue3 组件中导入 bower 组件 - WEBPACK_IMPORTED_MODULE_1_.Timetable 不是构造函数
- javascript - 数组中的 Javascript 随机项,在同一位置不重复(循环)
- css - 如何使用 css 模块同时应用两个类名?
- jquery - 如何使用 Angular js 修复前端注册并登录
- r - 列等于函数的结果,该函数将其他列 R 的参数作为输入参数
- ios - 录制音频时 React Native App 在 iOS 上崩溃
- yaml - 工作不工作的 Github Actions 条件语句
- flutter - 如何使用 Flutter 定期显示本地通知?