MVC: Attach event in controller

[Richardh Rotterdam]

Hi there,

I just started to get into extjs and singed up for this forum so please go easy on me.
I am trying to attach an event to a button using the Controller::control method.
With the code I have so far I am trying to attach an event. Somehow I must be doing something wrong


I have the following code in my app.js :


Ext.application({
name: 'Accordion',
// define the folder for the conrollers/models and views
appFolder: 'app',
// it's an array of controllers I wonder if I can add more
controllers: [
'Forms'
],


launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'table',
columns : 1,
width: 900


},

items: [
{
xtype: 'panel',
//title: 'Trigger',
html : '<button id="slide_button">click me!</button>',
id: 'trigger'

}
]
});
}
});


And the following code in my app/controller/Forms.js:


Ext.define('Accordion.controller.Forms', {
extend: 'Ext.app.Controller',




init: function() {


this.control({
'viewport > panel': {
//render: this.onPanelRendered,
// css selector to attach event
},
'button' : {
click : this.toggleSlide
}
});



},
// I want to call this function on click of the button element
toggleSlide : function() {
console.log('you clicked the button!');
}
});

The question is why is my toggleSlide function not called when I click the button?

My guess is I the following code is wrong in my controller or I am using it the wrong way.



'button' : { click : this.toggleSlide }

Thanks for reading,


Richard

[Richardh Rotterdam]

Found the solution by trial and error.

Instead of adding the button using an html string I added a button by passing it as object in my app.js

Button as object passed as shown below:


Ext.application({
name: 'Accordion',
appFolder: 'app',
controllers: [
'Forms'
],


launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'table',
columns : 1,
width: 900


},

items: [
{
xtype: 'panel',
title: 'Icons',
html : 'folder icons here',
width: 1024,
height: 350,
id: 'folders'

},
{
xtype: 'panel',
// I added this thingy here now it workz
buttons: [
{ text: 'Slide' }
],
id: 'trigger'

},


{
xtype: 'panel',
title: 'Preview',
html : 'preview',
height: 350,
id: 'preview'
}
]
});
}
});