Как сохранить состояние компонента диалога в пользовательском приложении ралли с использованием ралли 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; 
    } 
}); 

**** EDIT ****

Так что я пытался сделать эту работу. Я продолжал пытаться поддерживать состояние между обновлениями страницы и при навигации, и начал тестировать это с помощью массива для хранения разных строк и посмотреть, будут ли они все еще присутствовать при возвращении в приложение. Каждый раз, когда я ввожу что-то в поле, и нажимаю Enter, создается диалоговое окно, и я вызываю saveState() и пытаюсь сохранить строку с идентификатором для созданного диалогового окна. Но, кажется, что функция getState сохраняет только состояние, которое в первый раз вызывается (при первом вводе), потому что когда я обновляюсь или возвращаюсь к приложению, единственная строка, которая сохраняется, - это идентификатор первого созданного диалогового окна , но не из следующих. Это ошибка с функцией saveState из SDK, или я использую ее неправильно? Благодарю. Вот код:

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