eventlisters not working in controller - model-view-controller

Question

I'm working on my very first Sencha Touch 2 project, so I'm not very familiar with it yet. I'm using the Sencha documentation and have been Googling and Stackoverflowing a lot, but can't seem to find the answer to this problem.
I'm working in MVC and want to add some eventlisteners (in the controller) to controls in my view. Whatever I try, they don't seem to work, although they work when I add them in the view itself. Ofcourse that's not best practice at all, so I'm wondering what I'm doing wrong?
This is how my controller looks:
Ext.define("workingTime.controller.MainController", {
extend: "Ext.app.Controller",
views: ['Main'],
refs: [
{
sl_break: '#sl_break'
},
{
sl_work: '#sl_work'
}
],
init: function() {
this.control({
'sl_break': {
change: 'setBreakTime'
}
});
},
setBreakTime: function(newValue) {
console.log('set');
}
});
And this is how my view looks (with the listener still added):
Ext.define("workingTime.view.Main", {
extend: 'Ext.form.Panel',
controllers: ['MainController'],
requires: [
'Ext.field.Slider'
],
config: {
fullscreen: true,
items: [
{
xtype: 'label',
html: '<p class="label_field">Take a <span>five</span> minute break<p>'
},
{
xtype: 'sliderfield',
name: 'sl_break',
value: 5,
minValue: 1,
maxValue: 30,
style: {
'background-color' : '#FFecc0'
},
listeners: {
change: function() {
alert('changed');
}
}
},
{
]
}
});
Tell me if you need more info.

Answer 1

I would try: (without init function)
config: {
refs: {
sl_break: '#sl_break',
sl_work: '#sl_work'
},
control: {
sl_break: {
change: 'setBreakTime'
}
}
},

Answer 2

in your controller add sl_break: 'main sliderfield[itemId=sl_break]' in refs
Ext.define("workingTime.controller.MainController", {
extend: "Ext.app.Controller",
views: ['Main'],
refs: [
{
sl_break: 'main sliderfield[itemId=sl_break]'
}
],
init: function() {
this.control({
'sl_break': {
change: 'setBreakTime'
}
});
},
setBreakTime: function(newValue) {
console.log('set');
}
});
in view add alias to main and itemId to sliderfield
Ext.define("workingTime.view.Main", {
extend: 'Ext.form.Panel',
controllers: ['MainController'],
alias: 'widget.main',
requires: [
'Ext.field.Slider'
],
config: {
fullscreen: true,
items: [
{
xtype: 'label',
html: '<p class="label_field">Take a <span>five</span> minute break<p>'
},
{
xtype: 'sliderfield',
name: 'sl_break',
itemId:'sl_break',
value: 5,
minValue: 1,
maxValue: 30,
style: {
'background-color' : '#FFecc0'
},
listeners: {
change: function() {
alert('changed');
}
}
},
{
]
}
});
i hope it will work