Rally sample App error

Question

I'm trying to create a new app for Rally, and I'm new to both the Rally SDK and JavaScript. I found a tutorial on building your first Rally app, and I tried starting there. However, I'm getting an error when following the example.

Uncaught TypeError: Cannot call method 'refresh' of undefined 

At first I assumed I was doing something wrong, but eventually I copied & pasted the entire sample application in, only to discover it's happening for the sample project too.

Anything to point me in the right direction of successfully debugging this would be appreciated!

The entire App.js that I'm using (from the example) is this:

Ext.define('CustomApp', {
  extend: 'Rally.app.App',
  componentCls: 'app',
  items: { html: '<a href="https://help.rallydev.com/apps/2.0rc2/doc/">App SDK 2.0rc2 Docs</a>' },
  launch: function () {
    this.iterationCombobox = this.add({
      xtype: 'rallyiterationcombobox',
      listeners: {
        change: this._onIterationComboboxChanged,
        ready: this._onIterationComboboxLoad,
        scope: this
      }
    });
  },

  _onIterationComboboxLoad: function () {
    var addNewConfig = {
      xtype: 'rallyaddnew',
      recordTypes: ['User Story', 'Defect'],
      ignoredRequiredFields: ['Name', 'ScheduleState', 'Project'],
      showAddWithDetails: false,
      listeners: {
        beforecreate: this._onBeforeCreate,
        scope: this
      }
    };

    this.addNew = this.add(addNewConfig);

    var cardBoardConfig = {
      xtype: 'rallycardboard',
      types: ['Defect', 'User Story'],
      attribute: 'ScheduleState',
      storeConfig: {
        filters: [this.iterationCombobox.getQueryFromSelected()]
      }
    };
    this.cardBoard = this.add(cardBoardConfig);
  },

  _onBeforeCreate: function (addNewComponent, record) {
    record.set('Iteration', this.iterationCombobox.getValue());
  },

  _onIterationComboboxChanged: function () {
    var config = {
      storeConfig: {
        filters: [this.iterationCombobox.getQueryFromSelected()]
      }
    };

    this.cardBoard.refresh(config);
  }
});

Answer 1

Try this code instead. The source is available in this git hub repo.

Ext.define('CustomApp', {
    extend: 'Rally.app.TimeboxScopedApp',
    componentCls: 'app',
    scopeType: 'iteration',
    onScopeChange: function(scope) {
        this._iteration = scope.record.get('_ref');
        if (!this.down('#addNew')) {
         var addNewConfig = {
            xtype: 'rallyaddnew',
            itemId: 'addNew',
            recordTypes: ['User Story', 'Defect'],
            ignoredRequiredFields: ['Name', 'ScheduleState', 'Project'],
            showAddWithDetails: false,
            listeners: {
                beforecreate: this._onBeforeCreate,
                scope: this
            }
        }; 
    }


        this.addNew = this.add(addNewConfig);
        if(!this.board) {
             this.board = this.add({
                xtype: 'rallycardboard',
                storeConfig: {
                    filters: [scope.getQueryFilter()]
                }
            });
        } else {
            this.board.refresh({
                storeConfig: {
                    filters: [scope.getQueryFilter()]
                }
            });
        }
        this.iteration = scope.getRecord();
    },

    _onBeforeCreate: function(addNewComponent, record) {
    record.set('Iteration', this._iteration);
}
});