PDA

View Full Version : Any sample for clickEvent of tabPanel



evilight
16 Jan 2012, 1:55 AM
Hi all,

I wanna change the tabPanel's width by setSize({width: xxx}) when one of the tab is clicked.
how can I catch this event?


right now I have to change the ExtJS source code

when define Ext.tab.Bar


in the function :


onClick: function(e, target)

before :


tabPanel.setActiveTab(tab.card);


I add


if( tab.card.width != undefined )
{
tabPanel.setSize({width:tab.card.width});
}


I know this is not a right way to do so, but I really don't know how.
Can someone give me some sample code for this?

friend
16 Jan 2012, 7:05 AM
An Ext.tab.Panel supports event tabchange( Ext.tab.Panel tabPanel, Ext.Component newCard, Ext.Component oldCard, Object eOpts ).

If you're using MVC architecture, register this event in a controller, via the init() method:



init : function() {
this.control({
'sometabpanel' : {
tabchange: function(tabPanel, newTab, oldTab, eOpts) {
// you can examine some property of newTab, then determine what size to set.
tabPanel.setSize(200, 400);
}
}
});
}


If not using MVC, you can register the listener in-line, in the tabpanel config:



{
xtype: 'tabpanel',
listeners: {
tabchange: function(tabPanel, newTab, oldTab, eOpts) {
tabPanel.setSize(200, 400);
}
},
items: [{
xtype: 'panel',
title: 'Tab 1'
}]
}

evilight
16 Jan 2012, 6:11 PM
:D
Thank you very much!
I don't need to change Est JS 's source code Now !