Sencha touch 2: Set button handler parameter to lunch javascript function - extjs

Question

I am using the sencha touch o'really example. Is a conference that have sessions and speakers associated. Imagine that I have a session list that when is tapped the view change to the session details.
I have a view like this:
Ext.define('MyApp.view.session.Detail', {
extend: 'Ext.Container',
xtype: 'session',
config: {
layout: 'vbox',
title: '',
items: [
{
flex: 1,
layout: 'fit',
scrollable: 'vertical',
xtype: 'sessionInfo'
},
{
flex: 2,
xtype: 'speakers',
store: 'SessionSpeakers',
items: [
{
xtype: 'listitemheader',
cls: 'dark',
html: 'Speakers'
}
]
},
{
flex: 1,
xtype: 'button',
text: "Decline Button" ,
handler: function () {
/*HERE I WANT TO PUT SOME DATA FROM THE SESSION OBJECT. FOR EXAMPLE */
alert({title});
alert({start_date});
alert({location});
}
}
]
}
});
So, I want to replace the {title} {start_date} {location} for the corresponding values of the current session.
By the way in the controller I have this:
onSessionTap: function(list, idx, el, record) {
var speakerStore = Ext.getStore('SessionSpeakers'),
speakerIds = record.get('speakerIds');
speakerStore.clearFilter();
speakerStore.filterBy(function(speaker) {
return Ext.Array.contains(speakerIds, speaker.get('id'));
});
if (!this.session) {
this.session = Ext.widget('session');
}
this.session.setTitle(record.get('title'));
this.getSessionContainer().push(this.session);
this.getSessionInfo().setRecord(record);
},
Thanks!!

Answer 1

I could resolve it.
I had to create the button on runtime.
:
In Session view:
Ext.define('MyApp.view.session.Detail', {
extend: 'Ext.Container',
xtype: 'session',
config: {
layout: 'vbox',
title: '',
items: [
{
flex: 1,
layout: 'fit',
scrollable: 'vertical',
xtype: 'sessionInfo'
},
{
flex: 2,
xtype: 'speakers',
store: 'SessionSpeakers',
items: [
{
xtype: 'listitemheader',
cls: 'dark',
html: 'Speakers'
}
]
}
]
}
});
In Session controller:
onSessionTap: function(list, idx, el, record) {
var speakerStore = Ext.getStore('SessionSpeakers'),
speakerIds = record.get('speakerIds');
speakerStore.clearFilter();
speakerStore.filterBy(function(speaker) {
return Ext.Array.contains(speakerIds, speaker.get('id'));
});
if (!this.session) {
this.session = Ext.widget('session');
}
else{
//To avoid multiple buttons
this.session.removeAt(2);
}
this.session.setTitle(record.get('title'));
this.session.add(
Ext.Button.create({
flex: 1,
xtype: 'button',
text:'My button' ,
handler: function () {
alert(record.get('title'));
alert(record.get('start_date'));
} })
);
this.getSessionContainer().push(this.session);
this.getSessionInfo().setRecord(record);
},