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

    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,810
    Vote Rating
    779
    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 User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    84
    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,570
    Vote Rating
    53
    Animal will become famous soon enough Animal will become famous soon enough

      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,570
    Vote Rating
    53
    Animal will become famous soon enough Animal will become famous soon enough

      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
    8
    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!