Using the ref getter function returns undefined

Question

I am still trying to work through this tutorial , but with mixed success. In my script controller, I have the following:

config: { refs: { notesListContainer: 'noteslistcontainer', noteEditor: 'noteeditor' }, control: { notesListContainer: { newNoteCommand: 'onNewNoteCommand', editNoteCommand: 'onEditNoteCommand' } } }, onEditNoteCommand: function(list, record) { console.log('onEditNoteCommand'); this.activateNoteEditor(record); }, activateNoteEditor: function(record) { var noteEditor = this.getNoteEditor(); noteEditor.setRecord(record); Ext.Viewport.animateActiveItem(noteEditor, this.slideLeftTransition); }, 

When I run this in Chromium 18.0.1025.168, I get

 Uncaught TypeError: Cannot call method 'setRecord' of undefined Notes.js:37`. `this.getNoteEditor()' 

does not return noteEditor, but returns undefined.

The entire source of the project is available here .

Answer 1

It is important to specify ref as autoCreated with autoCreate : true

 config: { refs: { notesListContainer: 'noteslistcontainer', noteEditor: { selector: 'noteeditor', xtype: 'noteeditor', autoCreate: true // missing } }, }, ... }