Button click not detected

Question

I have a Window, and it contains some textfields and a button. Here's the definition of the button; alias.widget:'mywin', ....

            {
                xtype: 'button',
                height: 40,
                width: 110,
                text: 'send',
                x: 58,
                y: 12,
                action: 'buttonclick'
            },

In my controller, i am going to detect this button click and display a console.log statement.

here's the code ;

init: function(application) { this.control({

        'mywin button[action=buttonclick]': {
            click: this.butClick
        }
    });
},


butClick: function(button,record) {
    console.log('Button clicked');

This is not getting displayed, and how can i solve it ?

UPDATE

Ext.define('MyApp.view.MyWindowClass', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywin',
    height: 340,
    id: 'mywinid',
    width: 728,
    layout: {
        type: 'absolute'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [

                {
                    xtype: 'textareafield',
                    height: 140,
                    width: 340,
                    fieldLabel: 'Name',
                    x: 370,
                    y: 80
                },
                {
                    xtype: 'button',
                    height: 40,
                    width: 210,
                    text: 'Save',
                    x: 480,
                    y: 240,
                    action: 'submitfeedback'
                },
                {
                    xtype: 'datefield',
                    id: 'dd',
                    readOnly: true,
                    fieldLabel: 'Today',
                    x: 10                  
                }
            ],
            listeners: {
                show: {
                    fn: me.onWindowShow,
                    scope: me
                }
            }
        });
        me.callParent(arguments);
    }
});

CONTROLLER

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    models: [
        'MyController'
    ],
    stores: [
        'MyController'
    ],
    views: [
        'MyWindowClass',        
    ],
    init: function(application) {
        this.control({
            'mywin button[action=submitfeedback]': {
                click: this.butClick
            }
        });
    },
    butClick: function(button,record) {
        console.log('button clicked');
        });
    }
});

the code looks ok, but don't you have other js errors?. I get an error when i try to create that window. — nscrob, Jul 24 '12 at 15:08

David Kanarek · Accepted Answer · 2012-07-24T14:38:40.500

3

Two possibilities:

This is probably a typo, but you wrote alias.widget: 'mywin'. This should be alias: 'widget.mywin'
The controller might not be loaded. Put a break point at the beginning of the init function to see if it gets run.

Other than that, your code looks correct. If you post some more context (e.g. how you are creating the window, loading the controller, a full definition of mywin) I can examine it further.

Edit

Your capitalization is wrong in the selector. myWin should be mywin.

edited Jul 24 '12 at 14:38

answered Jul 24 '12 at 14:23

David Kanarek

12,611
5
45
62

I have updated the post with the Code to the Window Class. I have also added the Controller class – Illep Jul 24 '12 at 14:32
It's a typo. I have corrected it. Forgot to update the code. I'm still having the problem :( – Illep Jul 24 '12 at 14:54
Have you tested to make sure the controller is loaded? Try putting a console.log in the init or setting a breakpoint. Is `MyController` listed in the app's controllers property in app.js? – David Kanarek Jul 24 '12 at 15:17
MyController is listed, in the app.js. But when i put a console.log in the init of the Controller class it is not getting printed. What might cause this ? – Illep Jul 24 '12 at 15:25
Can you post the app.js? The Ext.application call's config should have a property called `controllers` which is an array of strings, one of which is `'MyController'`. – David Kanarek Jul 24 '12 at 15:30
I had misspelled the name of my `Controller` in the `app.js`. Thanks for pointing it out. – Illep Jul 24 '12 at 22:10

score 0 · Answer 2 · answered Jul 24 '12 at 14:10

0

You have the listener set up correctly except for adding the [action=buttonclick] part. Here are the docs for this.

'mywin button': { // this line determines what view object you want to listen to
    click: this.butClick // this line determines what event you want to listen to
}

answered Jul 24 '12 at 14:10

Michael Dillon

1,037
6
16

But, i am having my code in the `Controller`. What hapence if there are more button in that window, then how is it going to correctly fire the function ? – Illep Jul 24 '12 at 14:15
The bracketed section of the selector is perfectly legitimate. It specifies that the button has a property called action with a value of buttonclick. – David Kanarek Jul 24 '12 at 14:19
Why isn't the `click: this.butClick` firing ? This button is in a `Window` and does that have any impact to this ? – Illep Jul 24 '12 at 14:21

Button click not detected

2 Answers2