1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    44
    Vote Rating
    0
    daveh0 is on a distinguished road

      0  

    Default apply fx to tab's content area

    apply fx to tab's content area


    Does anyone know of an extension written or an elegant way to apply an effect (such as fadeIn()) to the content area of a tabPanel? So for example, If I have 3 tabs: 'About', 'Products' and 'Services', with 'About' being the active tab, I'd like it to be such that clicking the 'Services' tab will cause the 'About' content to fade and the 'Services' content to fade in.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,170
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    If I remember correctly somebody did write an extension for CardLayout to support transition effects. Try a search in the extensions forum.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I stink it was animal.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    Ext.override(Ext.layout.CardLayout, {
        setActiveItem : function(item){
            item = this.container.getComponent(item);
            if(this.activeItem != item){
                if (item.rendered && this.animate) {
    
                    Ext.Fx.syncFx();
    //              Correct top position of card because they have to occupy the same space
    //              during animation.
                    var n = item.getEl();
                    n.up('').setStyle({
                        position: 'relative'
                    });
                    n.setStyle({
                        position: 'absolute',
                        top: this.container.getLayoutTarget().getPadding('t') + 'px'
                    });
                    if (this.activeItem) {
                        this.activeItem.getEl().fadeOut({
                            useDisplay: true,
                            callback: Ext.Component.prototype.hide,
                            scope: this.activeItem
                        });
                    }
                    this.activeItem = item;
                    item.show();
                    this.container.doLayout();
                    n.fadeIn({
                        callback: function() {
                            n.setStyle({
                                position: ''
                            });
                        }
                    });
                    Ext.Fx.sequenceFx();
                } else {
                    if(this.activeItem){
                        this.activeItem.hide();
                    }
                    this.activeItem = item;
                    item.show();
                    this.container.doLayout();
                }
            }
        }
    });
    Then

    Code:
        var tabs = new Ext.TabPanel({
        	deferredRender: false, // important!
        	title: 'A TabPanel',
            ...
        });
        tabs.layout.animate = true; // important!

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Location
    Mainz
    Posts
    241
    Vote Rating
    1
    crp_spaeth is on a distinguished road

      0  

    Thumbs up


    Hey Animal,

    thank you again! I doesn't have a place to use this Animation thing but
    I really like the way you hide the disaktivated item in the callback.

    this.activeItem.getEl().fadeOut({
    useDisplay: true,
    callback: Ext.Component.prototype.hide,
    scope: this.activeItem

    });

    Borrowing the hide Funktion of the the Components prototype is a really nice Idea!

    I came up with the Question, what happens when the Item you want to hide has some extra logic in its own hide method?

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I guess it should be this.activeItem.hide

  7. #7

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    44
    Vote Rating
    0
    daveh0 is on a distinguished road

      0  

    Default


    I get the following error in IE6 only:

    Line: 33
    Char: 25
    Error: Expected identifier, string or number
    Code: 0
    URL: myserver.com/test_tabfx.htm
    I used your code verbatim and the following to create my TabPanel:

    Code:
        var tabs = new Ext.TabPanel({
            deferredRender: false, // important!
            title: 'A TabPanel',
            renderTo: Ext.getBody(),
            width: 400,
            height: 200,
            items: [{
                title: 'tab 1',
                html: 'this is tab 1'
            },{
                title: 'tab 2',
                html: 'Here we see tab 2'
            }]
        });
        tabs.layout.animate = true; // important!
    The TabPanel still renders and the tabs are functional. Just no fadein or fadeout of the panel content.

    Works fine in FF and Safari.

    Any clues as to what may be going wrong in IE6?

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    DId you check for trailing commas?

  10. #10
    Ext User
    Join Date
    Jan 2009
    Posts
    44
    Vote Rating
    0
    daveh0 is on a distinguished road

      0  

    Default


    Good call.

    Removed trailing comma from:

    Code:
    callback: function() {
        n.setStyle({
        position: '',
    });
    Thanks much!