如何使用 rally sdk 2.1 在自定义 rally 应用程序中维护对话框组件的状态？

Question

所以我正在使用 rally sdk 来为 rally 构建自定义应用程序，并且我正在尝试列出一些待办事项。我正在使用集会文本字段和集会对话框来实现它。它还没有一个完美的功能，但我想做的是保持我添加的对话框的状态，这样当我刷新应用程序时它们仍然存在。我还没有弄明白，而且我似乎真的无法从阅读维护状态的拉力赛指南中得到它。

这是我目前的代码：

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;
    }
});

****编辑****

所以我一直在努力完成这项工作。我一直试图在页面刷新之间和导航离开时保持状态，并开始通过使用数组存储不同的字符串来测试它，看看当返回应用程序时它们是否仍然存在。每次我在字段框中键入内容并按回车键时，都会创建一个对话框，我会调用 saveState()，并尝试为已创建的对话框保存一个带有 ID 的字符串。但是，似乎 getState 函数只保存第一次调用时的状态（在第一次输入时），因为当我刷新或返回应用程序时，唯一保留的字符串是创建的第一个对话框的 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();
}
});

Answer 1

这让人头疼。事实证明，有状态层中有一些优化，如果它认为值没有改变，则不会持久化状态。因为在您的 getState 方法中，您 return 使用应用程序使用和修改的相同对话框数组实例，所以它始终认为该值是当前值，因此不会重新保留它。

因此，如果您每次都将 getState 调整为 return 一个新数组，您就可以开始了：

 var newState = {
     currentDialogs: [].concat(this.dialogs)
 };

设置好后，每次添加任务时，您都会在网络选项卡中看到更新首选项的调用。

然后你只需要在启动方法中添加代码来查看当前状态并重新添加已经添加的任务。

_.each(this.dialogs, function(dialog) {
    this._addDialog(dialog.title, dialog.html); //todo: implement
}, this);

如何使用 rally sdk 2.1 在自定义 rally 应用程序中维护对话框组件的状态？

How to maintain state of a dialog component in a custom rally application using the rally sdk 2.1?

rally