1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    faithoffly is on a distinguished road

      0  

    Default Answered: How to add listener activate to a tab panel?

    Answered: How to add listener activate to a tab panel?


    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
    HTML Code:
     activate( Ext.Component this, Object eOpts )
    how to pass a Object,and why do i need to do that?
    Code:
        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?

  2. 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.

    Code:
    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
    Code:
    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.

  3. #2
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Answers
    11
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    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.

    Code:
    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
    Code:
    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.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    faithoffly is on a distinguished road

      0  

    Default


    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....

  5. #4
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Answers
    11
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    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, and then change the font-size using the specific variable $font-size, like this
    Code:
    $font-size  : 14px
    .

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    faithoffly is on a distinguished road

      0  

    Default


    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.

  7. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    faithoffly is on a distinguished road

      0  

    Default


    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.
    Code:
    .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~
    Code:
    .x-column-header 
    { 
        text-shadow:0 0 0 rgba(255, 255, 255, 0.3) !important;
    }

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi