PDA

View Full Version : TabPanel listener doesn't seem to be listening



airhole
26 Nov 2007, 6:53 AM
Hi all,

I'm new to both extjs and the site, but having searched the forum I can find nothing to explain the problem I am having. I have a layout based on the Complex example, with a TabPanel. On the first tab I have a click listener that should fire when the tab is clicked, but nothing is happening. Change the type of listener to activate and it works as expected. Any help would be much appreciated.

Thanks in advance for your replies


new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Refresh Messages',
autoScroll:true,
autoLoad:'index.cfm?fuseaction=forum.messages',
listeners: {click : refreshTab}
},{
contentEl:'center2',
title: 'Start New Topic',
autoScroll:true
}]
})

var refreshTab=function(tab){
tab.getUpdater().refresh();};

efege
26 Nov 2007, 7:08 AM
1. You are posting to the 1.x help forum, but you are using 2.0 code. As a general recommendation, choosing the appropriate forum can help you get better/faster answers, and helps others too. :)

2. Panels are components, and components do not respond to mouse events (like click). You must attach those types of listeners to the component's associated Elements, such as header or body.

airhole
26 Nov 2007, 8:04 AM
Apologies efege, if the thread can be moved to the appropriate place I'd appreciate it.

airhole
26 Nov 2007, 2:47 PM
Right, I've been hacking at this for a while and I'm not really getting anywhere. Looking at various forum posts I see what I have to do but can't quite put it together.

So TabPanel is a component, and what I need to do is refresh the contents of the body of this component. I realise I can do this using something like tab.body.refresh(). What I'm having trouble with is setting up an event handler to catch the click event.

I have this:


tabPanel.getComponent('refresh_messages').body.on("click", refreshTab,this);

and this


tabPanel.getActiveTab().body.on("click", refreshTab,this);

...where my item has an id of "refresh_messages". refreshTab is a function that should alert some text (just testing, if I can get the event handler to work properly it'll do the tab.body.refresh() thing). Any help would be greatly appreciated and I thank you in advance for any replies.

tryanDLS
26 Nov 2007, 2:55 PM
Are you trying to update an individual tab?

getComponent takes an index or id - you have not assigned an id, so what you're doing won't work. Assigning a title doesn't give it that value as an id. Give each tab item an id or access them by index. Why would you refresh on body click instead of something like tab activate?

hendricd
26 Nov 2007, 4:23 PM
If you want to refresh when the tab is clicked, use the panels 'activate' event, not click(for DOM elements).

airhole
27 Nov 2007, 1:12 AM
TryanDLS, apologies, I'd updated my tab definition with an id, but didn't update the OP.

hendricd, thanks for the steer, I'll give it a whirl.

airhole
27 Nov 2007, 1:22 AM
Guys, as I understand it, the "activate" event will only fire when you select another tab and return to the first tab. I want to refresh the content when the currently active tab is clicked. This is why I was trying to attach the onclick event to the tabpanel body. Is this the wrong way to go about it?

airhole
27 Nov 2007, 6:13 AM
Ok, another update. Attaching the listener to the TabPanel body is *so* not what I was trying to do, although attaching it to the TabPanelItem body works. So how do I attach a listener to the actual tab itself? I thought that tabPanel.getActiveTab().addListener("click, refreshTab, this) would do the trick, but no. efege mentioned a header, although I can see no mention of a header element in the docs for TabPanelItem. Anyone got any ideas?

hendricd
27 Nov 2007, 7:28 AM
Might need tweaking, but this should force and activeTab refresh for ALL mouse-click scenarios for the tabPanel and ALL its child panels:





new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
default:{autoScroll:true},
listeners: {render: function(tabPanel){
tabPanel.getEl().on('click',function(e){
if(this.activeTab){
this.activeTab.getUpdater().refresh()
}
},tabPanel);
tabPanel.strip.on('click',function(e){
var t = this.findTargets(e);
if(t && !t.close && t.item & t.item == this.activeTab){
this.activeTab.getUpdater().refresh();
}
},tabPanel);
},
tabchange: function(tp,newTab){
newTab.getUpdater().refresh();

}
},
items:[{
contentEl:'center1',
title: 'Refresh Messages',
autoLoad:'index.cfm?fuseaction=forum.messages',
},{
contentEl:'center2',
title: 'Start New Topic',
}]
})

If you are using autoLoad, why bother with contentEl at all ? It would get overriden (removed from the DOM) on the first body update anyway.

Further, why would you want to refesh the 'Start new Topic' panel everytime it was clicked?

@Airhole -- what on earth ?

27 Nov 2007, 7:33 AM
http://www.realmofdarkness.net/pranks/chappelle-4.jpg

airhole
27 Nov 2007, 8:08 AM
hendricd, I could KISS you (but I'll refrain).

I don't want to refresh the "Start New Topic" tab on click, only the "Refresh Messages" one. I suppose that technically I want the active tab to behave like a button, and if we're being strict with our tab metaphor it's incorrect...but I like the tab interface and it works well for a forum.

I literally started with extjs a few days ago and I've learned so much already, so thank you for taking the time to respond.

airhole...don't ask. There are some things in this world we are not meant to know :D

airhole
27 Nov 2007, 8:31 AM
hendricd, sorry to be a pain in the butt again...

Is there any way to add the listener only to a particular tab? Not to the child panels or anything else...I need to be able to click on hyperlinks in the child panel so the listener can't be applied to the whole thing. So simply, click tab, content refreshes.

hendricd
27 Nov 2007, 9:17 AM
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
default:{autoScroll:true},
listeners: {render: function(tabPanel){
tabPanel.getEl().on('click',function(e){
if(this.activeTab){
this.activeTab.getUpdater().refresh()
}
},tabPanel);
tabPanel.strip.on('click',function(e){
var t = this.findTargets(e);
if(t && !t.close && t.item && t.item.id == 'messages'){
t.item.getUpdater().refresh();
}
},tabPanel);
},
tabchange: function(tp,newTab){
newTab.getUpdater().refresh();

}},
items:[{
contentEl:'center1',
title: 'Refresh Messages',
listeners:{activate:function(tab){tab.getUpdater().refresh();}},
id:'messages',
autoLoad:'index.cfm?fuseaction=forum.messages',
},{
contentEl:'center2',
title: 'Start New Topic',
}]
})


You got the picture now?

airhole
27 Nov 2007, 12:45 PM
This is kinda going in circles now :D

I know about the activate listener. It'd be great if all I wanted to do was refresh content in a tab when I click on another tab and then back to the first tab. But I want the content to load even when I click an active tab. So "Refresh Messages" is the active tab, I click "Refresh Messages" and the content is reloaded. Sorry to continue haranguing you, if there really is no answer to this I'll just have to rethink my interface.

hendricd
27 Nov 2007, 12:51 PM
This is kinda going in circles now

But I want the content to load even when I click an active tab. So "Refresh Messages" is the active tab, I click "Refresh Messages" and the content is reloaded.

Yes, I'm dizzy now too.

That may require one or more click handlers. If they click on what? the tabStrip's tab element and/or the entire panel for that tab (including body, headers, footers, what) ?

Gotta be more specific dude.

airhole
27 Nov 2007, 1:41 PM
Sorry dude, I'm saying tab when I'm actually referring to the tab strip (ie. the actual wee tabby bit, not the associated content panel :D).

I was so sure this was something easy when I started :D

hendricd
27 Nov 2007, 1:55 PM
This should have done it (if you gave your panel an ID). Look at the values in FB console when you click on the current tab:



new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
default:{autoScroll:true},
listeners: {render: function(tabPanel){
tabPanel.strip.on('click',function(e){
var t = this.findTargets(e);
console.log (['stripTab click',t,e]);
if(t && !t.close && t.item && t.item.id == 'messages'){
t.item.getUpdater().refresh();
}
},tabPanel);



What is 't' when you click it?

airhole
28 Nov 2007, 4:33 AM
hendricd, it works! Hallelujah!

Thank you very much for your time and patience.