eventlisters not working in 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.

refs should be wrapped in a config object. – Titouan de Bailleul Dec 29 '12 at 02:12 — Titouan de Bailleul, Dec 29 '12 at 02:12

score 0 · Answer 1 · answered Dec 28 '12 at 13:29

0

I would try: (without init function)

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

    control: {
        sl_break: {
            change: 'setBreakTime'
        }
    }
},

answered Dec 28 '12 at 13:29

Michael

6,823
11
54
84

You can also look at: http://stackoverflow.com/questions/14029292/tap-event-for-ext-carousel-carousel – Michael Dec 28 '12 at 13:32
doesn't seem to work... Maybe I should try to access the slider through an action instead of an id? – silvdb Dec 28 '12 at 17:17

score 0 · Answer 2 · answered Dec 28 '12 at 13:33

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

eventlisters not working in controller

2 Answers2