Sencha Touch 2 set label in Controller - sencha-touch

Question

I'm new to the MVC structure with Sencha Touch 2.
In my view, I have a label as follows:
{
xtype: 'label',
itemId: 'title',
html: 'title'
}
In my controller, how do I set the value of this label?
Currently my controller (working off a tutorial sample):
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
noteView: "noteview",
noteEditorView: "noteeditorview",
notesList: "#notesList"
},
control: {
noteView: {
// The commands fired by the notes list container.
noteNextCommand: "onNoteNextCommand",
noteAnswerCommand: "onNoteAnswerCommand"
},
noteEditorView: {
// The commands fired by the note editor.
saveNoteCommand: "onSaveNoteCommand",
deleteNoteCommand: "onDeleteNoteCommand",
backToHomeCommand: "onBackToHomeCommand"
}
}
},
onNoteNextCommand: function () {
var noteView = this.getNoteView();
console.log("loaded view");
//set label here
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
var notesStore = Ext.getStore("Notes");
notesStore.load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
} });
The full View code:
Ext.define("NotesApp.view.Note", {
extend: "Ext.Container",
alias: "widget.noteview",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "toolbar",
title: "Random Question",
docked: "top",
items: [
{ xtype: 'spacer' },
{
xtype: "button",
text: 'List',
ui: 'action',
itemId: "list"
}
]
},
{
xtype: "label",
html: 'question',
itemId: "question"
},
{
xtype: "label",
html: 'answer',
itemId: "answer"
}
],
listeners: [{
delegate: "#list",
event: "tap",
fn: "onListTap"
},
{
delegate: "#question",
event: "tap",
fn: "onQuestionTap"
},
{
delegate: "#answer",
event: "tap",
fn: "onAnswerTap"
}]
},
onListTap: function () {
console.log("list");
this.fireEvent("showList", this);
},
onQuestionTap: function () {
console.log("noteAnswer");
this.fireEvent('noteAnswer', this);
},
onAnswerTap: function () {
console.log("noteNext");
this.fireEvent('noteNext', this);
} });

Answer 1

You need to add a reference to your label in your controller :
config: {
refs: {
yourlabel : #YOUR_LABEL_ID'
}
…
}
and then in your controller you can access the label by calling this.getYourlabel();
So, in order to change the title, you need to do (wherever you want in your controller)
this.getYourlabel().setHtml('Label');
Hope this helps

Answer 2

Give your label some id property value
{
xtype: "label",
html: 'answer',
id: "answerLabel"
}
and then write the following code in your controller.
.....
..... // Controller code ..
refs: {
answerLabel: '#answerLabel',
},
control: {
answerLabel: {
tap: 'answerLabelFn'
}
}
.....
.....
answerLabelFn : function() {
// Your Label tap handler code...
}