PDA

View Full Version : How to add listener activate to a tab panel?



faithoffly
5 Dec 2011, 11:17 AM
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
5 Dec 2011, 11:51 AM
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
5 Dec 2011, 12:21 PM
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
5 Dec 2011, 1:28 PM
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
5 Dec 2011, 1:45 PM
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
5 Dec 2011, 1:51 PM
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
{
    font-size: 12px;
}

.x-column-header
{
    text-shadow:0 0 0 rgba(255, 255, 255, 0.3);
}

I tried to add !important , still not working~

.x-column-header
{
    text-shadow:0 0 0 rgba(255, 255, 255, 0.3) !important;
}