Reputation: 17
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
Upvotes: 1
Views: 7199
Reputation: 4405
Remove the space between button
and [action=add]
in your selector:
this.control({
'viewport button[action=add]': {
click: this. addData
},
...
Upvotes: 2