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

Question

所以我正在玩拉力赛sdk来为拉力赛建立自定义应用程序，而我正在尝试做一些类似的事情。我正在使用拉力赛文本框和拉力赛对话框来实施它。它还没有一个完美的功能，但我想要做的是保持我添加的对话框的状态，以便在刷新应用程序时它们仍然存在。我还没有弄明白这一点，而且我看不出它是通过阅读关于维持国家的拉力指南来得到它的。

这里是我到目前为止的代码：

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方法中，您返回的是由应用程序使用和修改的相同对话框数组实例，因此它总是认为该值是当前值，因此不会重新保留它。

所以只要你调整你的getState返回一个新的阵列中的每个你应该很好的时间去：

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

一旦每次添加一个任务时，你会看到一个呼叫更新到位网络选项卡中的首选项。

然后，您只需在启动方法中添加代码即可查看当前状态并重新添加已添加的任务。

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