PDA

View Full Version : Handlers on Ext.Components



skylerrichter
18 Jul 2010, 10:14 PM
In the twitter example and then data example from the kitchen sink you can set a handler on the tabs to trigger a function when their clicked. How do you do this when using Ext.Component?



app.trainersList = new Ext.Component({
title: 'Trainers',
iconCls: 'user',
html: 'Trainers',
scroll: 'vertical',
tpl: '<tpl for="."><div class="contact"><strong>{first_name}</strong> {last_name}</div></tpl>',
handler: function(){
alert('trainersList handler');
}
});




app.panel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
animation: 'slide',
items: [{
title: 'Dashboard',
iconCls: 'favorites',
html: 'Dashboard',
handler: function(){
alert('tab handler');
}
}]
});


based on the twitter and data examples you would I would expect handler to work in these situations too. Or am i missing something?

evant
18 Jul 2010, 10:24 PM
Components don't have a handler, because there's not really a decent default action. For example, with a button, the default action is usually click, but a Component can do anything (especially when you think of all the subclasses).

What are you trying to do?

skylerrichter
19 Jul 2010, 5:07 AM
I am trying to update a dataset when a tab button is pushed. eg.


app.refreshTrainers = Ext.util.JSONP.request({
url: 'http://example.com/app/api/get_users/user_type_id/2',
callbackKey: 'callback',
callback: function(results){
if(results.data){
app.trainersList.update(results.data);
}
}
});

In the case of the twitter or kitchen sink data examples I would want to add this to the handler method so that it got triggered every time the tab was clicked.

skylerrichter
19 Jul 2010, 11:17 AM
More specifically this is what i am trying to do



Ext.ns('app');

Ext.setup({
onReady: function(){


app.trainersList = new Ext.Component({
title: 'Trainers',
iconCls: 'user',
html: 'Trainers',
scroll: 'vertical',
tpl: '<tpl for="."><div class="contact"><strong>{first_name}</strong> {last_name}</div></tpl>',
handler: app.refreshTrainers
});

app.refreshTrainers = Ext.util.JSONP.request({
url: 'http://nomanila.com/app/api/get_users/user_type_id/2',
callbackKey: 'callback',
callback: function(results){
if(results.data){
app.trainersList.update(results.data);
}
}
});

app.panel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
animation: 'slide',
items: [{
title: 'Dashboard',
iconCls: 'favorites',
html: 'Dashboard'
},
app.trainersList,
{
title: 'Events',
iconCls: 'time',
html: 'Events',
handler: app.refreshEvents
},
{
title: 'Settings',
iconCls: 'more',
html: 'Settings'
}]
});


}
});


I just want to be able to get fresh data when the tab is clicked.