0

我正在开发我的第一个 Sencha Touch 2 项目，所以我对它还不是很熟悉。我正在使用 Sencha 文档并且一直在谷歌搜索和 Stackoverflowing 很多，但似乎无法找到这个问题的答案。

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

这是我的控制器的外观：

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

    ]
}
});

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

4

2 回答 2

0

我会尝试：（没有初始化功能）

config: {
    refs: {
        sl_break: '#sl_break',
        sl_work: '#sl_work'
    },

    control: {
        sl_break: {
            change: 'setBreakTime'
        }
    }
},
于 2012-12-28T13:29:34.933 回答
0

在您的控制器sl_break: 'main sliderfield[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到主和itemId 滑块字段

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

        ]
    }
    });

我希望它会起作用

于 2012-12-28T13:33:34.527 回答