PDA

View Full Version : Listen for click on a tab



Rowan
8 Mar 2008, 11:01 AM
We use the tab as the refresh button on a panel so a custom event is needed to listen to the items click, not activate



// private
Ext.TabPanel.prototype.onStripClick = function(e){
var t = this.findTargets(e);

if(!t.item.addTabClick){
t.item.addEvents({
"tabclick":true
})
t.item.addTabClick=true;
}
t.item.fireEvent("tabclick", this.activeTab, this);

if(!t.close && t.item && t.item != this.activeTab){
this.setActiveTab(t.item);
}
}

You can listen to it by using the following, obviously you dont need to be using the layout or viewport that I am.

viewport.findById('south-panel').findById(TabPanelId).on('tabclick', FUNCTION, this);




Hope that's useful for someone else

Rowan

liberte
9 Apr 2008, 11:57 AM
I set up our tabs to refresh a tab without creating a new event for tab clicking. Code and style changes are below.

It is important to provide so feedback to the user indicating that the refresh behavior is available. I merely underline the text text, but I would like to show a refresh icon that highlights on mouseover anywhere in the tab.

I also changed the default behavior of tabs when the user does mousedown or clicks on a tab or tab-close icon ExtJS will immediately close your tab when you mousedown on the close icon. But this destructive operation should wait til the user has released the mouse button Activating a tab on mousedown is not so bad, but it could still be problematic



MyTabPanel = Ext.extend(Ext.TabPanel,
{
onStripMouseDown : function(e)
// A mousedown should not do anything destructive - it should only provide feedback.
// Switching tabs could be destructive (e.g. with loaded tab panel).
{
e.preventDefault();
if(e.button != 0){
return;
}
var t = this.findTargets(e);
if(t.close){
// Don't remove the tab yet, but don't proceed.
return;
}
// No immediate refresh of active tab.
// Don't activate here, otherwise onStripClick will activate again.
},

onStripClick : function(e)
// A 'click' requires 'mouseup' in the same element, or 'return' over active element.
{
// override to move mousedown behavior here.
var t = this.findTargets(e);
if(t.close){
this.remove(t.item);
return;
}
// Allow refresh of active tab.
if (t.item && t.item.refresh && t.item == this.activeTab)
this.activeTab = null;
if(!t.close && t.item && t.item != this.activeTab)
{
this.setActiveTab(t.item);
}
}
});




.ssExtTab .x-tab-strip-active span.x-tab-strip-text
{
color:#15428b; /* from ExtJS */
text-decoration: none;
}

.ssExtTab .x-tab-strip-over span.x-tab-strip-text
{
text-decoration: underline;
cursor: pointer;
}

Rowan
6 Nov 2008, 10:44 AM
I think its easier to add the event and listen to it but anyhows here is the code for 2.2 since they have no stripclick anymore




Ext.TabPanel.prototype.onStripMouseDown = function(e){
if(e.button != 0){
return;
}
e.preventDefault();

var t = this.findTargets(e);

//close a panel without firing the event
if(t.close){
this.remove(t.item);
return;
}

//add in a tab click event
if(t.item !== 'undefined' && t.item != null){
if(!t.item.addTabClick){
t.item.addEvents({
"tabclick":true
})
t.item.addTabClick=true;
}
t.item.fireEvent("tabclick", this.activeTab, this);
}

//set the tab as active if it isnt
if(t.item && t.item != this.activeTab){
this.setActiveTab(t.item);
}
}

thiner
8 Oct 2009, 6:44 PM
Hi guys, what should I do if I want to listen to 'mouseover' event of tab?