如何使用rally sdk 2.1在自定义rally应用程序中维护对话组件的状态?
因此,我正在使用rally sdk为rally构建自定义应用程序,并且我正在尝试创建某种类型的待办事项列表。我正在使用rally文本字段和rally对话框实现它。它还没有一个完美的功能,但我正在尝试做的是维护我添加的对话框的状态,这样当我刷新应用程序时它们仍然存在。我还没有弄明白,而且我似乎无法从阅读《维护状态的拉力赛指南》中真正了解到这一点 以下是我目前掌握的代码:如何使用rally sdk 2.1在自定义rally应用程序中维护对话组件的状态?,rally,Rally,因此,我正在使用rally sdk为rally构建自定义应用程序,并且我正在尝试创建某种类型的待办事项列表。我正在使用rally文本字段和rally对话框实现它。它还没有一个完美的功能,但我正在尝试做的是维护我添加的对话框的状态,这样当我刷新应用程序时它们仍然存在。我还没有弄明白,而且我似乎无法从阅读《维护状态的拉力赛指南》中真正了解到这一点 以下是我目前掌握的代码: Ext.define('CustomApp', { extend: 'Rally.app.App', state
Ext.define('CustomApp', {
extend: 'Rally.app.App',
stateful: true,
componentCls: 'app',
getState: function() {
return {
dialogs: this.dialogs
};
},
applyState: function(state) {
this.dialogs = state.dialogs;
},
doLayout: function() {
var me = this;
var textField = Ext.create('Rally.ui.TextField', {
fieldLabel: 'Add task:',
listeners: {
scope: me,
specialkey: me._checkEnter
}
});
me.add(textField);
},
launch: function() {
this.doLayout();
this.taskCounter = 0;
this.yPosition = 50;
this.dialogs = [];
},
_checkEnter: function(field, event) {
if (event.getKey() == event.ENTER) {
this._onEnter(field);
}
},
_onEnter: function(field) {
this.taskCounter = this.taskCounter + 1;
var dialog = Ext.create(Rally.ui.dialog.Dialog, {
context: this.getContext(),
id: (99990 + this.taskCounter).toString(),
autoShow: true,
autoCenter: false,
draggable: false,
closable: true,
modal: false,
width: 300,
x: 100,
y: this.yPosition,
title: 'Task ' + this.taskCounter,
items: {
xtype: 'component',
html: field.getRawValue(),
padding: 10
}
})
this.yPosition = this.yPosition + 100;
}
});
****编辑****
所以我一直在努力让这一切顺利进行。我一直试图在页面刷新和离开时保持状态,并开始使用数组存储不同的字符串来测试这一点,看看它们在返回应用程序时是否仍然存在。每次我在字段框中键入内容并按enter键时,就会创建一个对话框,我调用saveState(),并尝试为创建的对话框保存一个ID为的字符串。但是,getState函数似乎只在第一次调用时(第一次输入时)保存状态,因为当我刷新或返回应用程序时,唯一保留的字符串是创建的第一个对话框的id,而不是下面的对话框的id。这是SDK中saveState函数的一个错误,还是我用错了?谢谢代码如下:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
stateful: true,
componentCls: 'app',
getState: function() {
console.log('getting state');
if(this.dialogs.length > 0) {
console.log('this.dialogs from getState:', this.dialogs);
var newState = {
currentDialogs: this.dialogs
};
console.log(newState);
return newState;
}
return null;
},
applyState: function(state) {
console.log('applying state');
console.log('current state:', state);
if(state.currentDialogs) {
this.dialogs = state.currentDialogs;
console.log('this.dialogs after applying state:', this.dialogs);
}
else {
this.dialogs = [];
}
},
doLayout: function() {
var me = this;
var textField = Ext.create('Rally.ui.TextField', {
fieldLabel: 'Add task:',
listeners: {
scope: me,
specialkey: me._checkEnter
}
});
me.add(textField);
},
launch: function() {
this.dialogs = this.dialogs;
this.doLayout();
this.taskCounter = 0;
this.yPosition = 50;
},
_checkEnter: function(field, event) {
if (event.getKey() === event.ENTER) {
this._onEnter(field);
}
},
_onEnter: function(field) {
this.taskCounter = this.taskCounter + 1;
var dialog = Ext.create(Rally.ui.dialog.Dialog, {
context: this.getContext(),
autoShow: true,
autoCenter: false,
draggable: false,
closable: true,
modal: false,
width: 300,
x: 100,
y: this.yPosition,
title: 'Task ' + this.taskCounter,
items: {
xtype: 'component',
html: field.getRawValue(),
padding: 10
}
});
this.yPosition = this.yPosition + 100;
this.dialogs.push((99990 + this.taskCounter).toString());
this.saveState();
}
});
这是一个令人头痛的问题。事实证明,在有状态层中有一些优化,如果它认为值没有改变,就不会持久化状态。因为在getState方法中,您返回的是应用程序使用和修改的同一个dialogs数组实例,它总是认为该值是当前值,因此不会重新保存该值 因此,如果您只是调整getState,每次都返回一个新数组,那么您就可以开始了:
var newState = {
currentDialogs: [].concat(this.dialogs)
};
一旦设置到位,每次添加任务时,您都会在“网络”选项卡中看到更新首选项的调用
然后,您只需在launch方法中添加代码即可查看当前状态并重新添加已经添加的任务
_.each(this.dialogs, function(dialog) {
this._addDialog(dialog.title, dialog.html); //todo: implement
}, this);
谢谢凯尔,这帮了大忙。我也认为可能是这样的,不知道为什么没有想到concat解决方案。无论如何,还有一件事,有没有一种方法可以让rally订阅上的所有用户都可以使用这些持久化数据,而不必使用外部数据库作为存储模型?