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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar