How to Add a Button Click event on Controller of EXTJS MVC

Question

I am trying to develop an application using Ext JS. so far I have developed a Viewport with border layout and I have north region, south region done. in the center region i have multiple panel such 1. for search the data. 2. input the data task list (a form) and on the next panel to this I have displayed the grid. Following to that panel I have a Button which should listen to click event to brought up the form to the user.

For that event handeling my controller looks like this:

    this.control({
       'viewport button [action=add]':{
    click: this. addData},
addData : function(button){
consol.log('the add button was clicked');
}
    .......

Now if i click the button in the page where the button has been displayed its not responding anything following is the structure code i have for the viewport:

launch : function() {
    Ext.create('Ext.container.Viewport', {
        layout : 'border',
        autoScroll : true,
        items : [{
            region: 'north',
            .......
        },{
            region: 'west',
            ..............
        },{
            region: 'center',
            items:[{
                xtype: 'panel',
                ..............
            },{
                xtype: 'panel',
                ............
            },{
                xtype: 'userlist' 
            },{
                xtype: 'button',
                 text: 'Add',
                 action: 'add'
            }]
        }]

Any help would be highly Appreciated

Answer 1

Remove the space between button and [action=add] in your selector:

this.control({
   'viewport button[action=add]': {
        click: this. addData
    },
    ...