How to add listener activate to a tab panel?

[faithoffly]

i'm a new comer from China, so please pardon me for any possible misspell.
till now everything works fine,but i have problem when trying to add a listener to a tab panel when experiencing.i search for it on the ext.tab.panel API but i don't quit understand
activate( Ext.Component this, Object eOpts ) how to pass a Object,and why do i need to do that?

var contentPanel = Ext.create('Ext.tab.Panel', {
id: 'content-panel',
region: 'center',
border: false,
minTabWidth : 150,
defaults: {
autoScroll:true,
bodyPadding: 0
},
activeTab: 0,
border: false,
listeners: {
activate: function(selModel, Cmp){
alert('a');//didn't show anything
var activeTabIndex = this.getActiveTab().index;
if (Ext.getDom(activeTabIndex + '-details')){
detailEl.hide().update(Ext.getDom(activeTabIndex + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
}
else{
detailEl.hide().update(Ext.getDom('empty-panel-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
}

}
},
items: [{
id: 'HomePage',
title: 'start',
iconCls:'home',
layout: 'fit',
bodyStyle: 'padding:25px',
bodyPadding: 20,
closable: true,
contentEl: 'start-div' // pull existing content from the page
}]
});

besides i'm using 4.07 ExtJS and the font size of trees and tab panel strip is very small in ie9 and Firefox? Is that a bug or smth?

[bt_bruno]

Hi @PMfaithoffly, welcome aboard! The activate should be put in tabpanel children, not in tabpanel itself. Once a tab is activated, the event is triggered.


Ext.create('Ext.tab.Panel',{
renderTo: Ext.getBody(),
width: 500,
height: 200,
defaults: {
listeners: {
activate: function(tab, eOpts) {
alert(tab.title + ' activate');
}
}
},
items: [{
title: 'tab a'
},{
title: 'tab b'
}]
});

And the method signature that you see in our docs
activate( Ext.Component this, Object eOpts ) Is actually the parameters that ExtJS will provide your listener, not parameters that you should care to pass on.

[faithoffly]

thanks a lot for your warming help! It works exactly the way you're talking about. I still have confusions for the font size of trees and tab panel strip because i have to use Chinese....

[bt_bruno]

Ok, so the default font-size is 12px. I don't know if this is an issue from your browser (try to check the zoom), or really an issue with the default font-size.

You can also easily customize the default theme and increase the font-size in all aspects. Learn more about theming with our official guide (http://docs.sencha.com/ext-js/4-0/#!/guide/theming), and then change the font-size using the specific variable $font-size, like this
$font-size : 14px.

[faithoffly]

In fact it's an issue in our language...because Chinese looks very small in tree and etc. Normally whenever a new version of ext came out someone in China will make patches to change the default font-size.I just couldn't find a patch of the latest version so I came. looks like using theme is the best way. thanks again for your help!!Hope there's more people like you.

[faithoffly]

this is the patch for 4.02a someone in China made.I put it in an CSS file and linked it, but have no idea why it's not working.

.x-btn-default-small .x-btn-inner， .x-btn-default-medium .x-btn-inner， .x-btn-default-large .x-btn-inner， .x-btn-default-toolbar-small .x-btn-inner， .x-btn-default-toolbar-medium .x-btn-inner， .x-btn-default-toolbar-large .x-btn-inner， .x-menu-item-text， .x-html-editor-tb .x-font-， .x-panel-header-default， .x-panel-header-text-default， .x-panel-header-default-framed， .x-tip-header， .x-tip-body， .x-form-invalid-tip-body， .x-tip-header-text， .x-progress-text， .x-toolbar， .x-toolbar .x-form-item-label， .x-toolbar .x-toolbar-text， .x-window-header-text-default， .x-tab-bar， .x-tab button， .x-grid-rowbody， .x-grid-row .x-grid-cell， .x-grid-group-title， .x-grid-row-editor .x-form-field， .x-grid-row-editor .x-form-display-field， .x-form-invalid-under， .x-fieldset-header， .x-column-header， .x-mask-msg div， .x-btn-group-header-text-default-framed， table.x-datepicker-inner a， .x-monthpicker-item， .x-dd-drag-ghost
{
&＃160;&＃160;&＃160; font-size: 12px;
}

.x-column-header
{
&＃160;&＃160;&＃160; text-shadow:0 0 0 rgba（255， 255， 255， 0.3）;
}

I tried to add !important , still not working~

.x-column-header
{
&＃160;&＃160;&＃160; text-shadow:0 0 0 rgba（255， 255， 255， 0.3） !important;
}