Reputation: 5802
I am trying to implement the actions on click on tabs in tabpanel using sencha. Somehow I am not able to get the alerts on clicking the tabs.
Here is my code. I have tried to use handler and listener both the approaches on different tabs but I am not able to get alert message with any of them.
Int.views.bottomTabs = new Ext.TabPanel({
dock: 'bottom',
tabBar: {
id:'bottomtab',
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical',
xtype: 'button'
},
items: [
{
title: 'Tab1',
iconCls: 'und',
handler: function(){
alert('It is clicked');
},
{
title: 'Tab2',
iconCls: 'und',
listeners: {activate: update},
},
{
title: 'Tab3',
iconCls: 'und',
},
{
title :'Tab4',
iconCls: 'und',
}
]
});
var update = function() {
alert('tab2 is clicked');
}
Please help me on where am i doing wrong.
Thank you,
Upvotes: 0
Views: 467
Reputation: 2607
The way you want to attach a listener (if you want to do it inline) is the following:
items : [
{
title : 'Hello World',
listeners : {
activate : function() {
alert('hello world');
}
}
},
{
//...
}
]
The reason why your second way didnt work by calling the update function is because you declared update after you instantiated Ext.TabPanel
If you want to reference a function instead of writing it inline then you need to define your items inside initComponent() (better practice) and extend your class.
//..
onActivate : function() {
alert('hello world');
},
initComponent : function() {
this.items = [
{
title : 'Hello World',
listeners : {
activate : this.onActivate
}
},
{
//...
}
]
// apply to superClass
}
You should read up on the Sencha Touch Class system. In your case this would be the Sencha Touch 1 way. Have a look at this series of tutorials: http://www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-1/
Upvotes: 3