Model view controller EventLister在控制器中不工作

我正在做我的第一个SenchaTouch2项目，所以我还不太熟悉它。我正在使用Sencha文档，并且已经在Google上搜索了很多，但是似乎找不到这个问题的答案

我在MVC中工作，希望向视图中的控件添加一些EventListener（在控制器中）。无论我尝试什么，它们似乎都不起作用，尽管当我将它们添加到视图本身时，它们起作用。当然，这根本不是最佳实践，所以我想知道我做错了什么

这是我的控制器的外观：

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

这就是我的视图的外观（仍然添加了侦听器）：

Ext.define（“workingTime.view.Main”{
扩展：“Ext.form.Panel”，
控制器：['MainController']，
要求：[
“Ext.field.Slider”
],
配置：{
全屏：对，
项目：[
{
xtype:'标签'，
html:“
休息五分钟”
},
{
xtype:'滑块字段'，
名称：'sl_break'，
数值：5，
最小值：1，
最大值：30，
风格：{
“背景色”：“FFEC0”
},
听众：{
更改：函数（）{
警报（“更改”）；
}
}
},
{
]
}
});

如果您需要更多信息，请告诉我。

我会尝试：（不使用init函数）

---

在控制器中，在参考中添加

sl_break:“主滑块字段[itemId=sl_break]”

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

在视图中，将

alias

添加到main，并将

itemId

添加到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');
                    }
                }
            },
            {

        ]
    }
    });

Ext.define（“workingTime.view.Main”{
扩展：“Ext.form.Panel”，
控制器：['MainController']，
别名：“widget.main”，
要求：[
“Ext.field.Slider”
],
配置：{
全屏：对，
项目：[
{
xtype:'标签'，
html:“
休息五分钟”
},
{
xtype:'滑块字段'，
名称：'sl_break'，
itemId:'sl_break'，
数值：5，
最小值：1，
最大值：30，
风格：{
“背景色”：“FFEC0”
},
听众：{
更改：函数（）{
警报（“更改”）；
}
}
},
{
]
}
});

---

我希望它会起作用

您也可以看看：似乎不起作用…也许我应该尝试通过操作而不是id访问滑块？引用应该包装在配置对象中。

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

    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');
                    }
                }
            },
            {

        ]
    }
    });