Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: apply fx to tab's content area

  1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    44
    Vote Rating
    0
      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 User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,984
    Vote Rating
    933
      0  

    Default

    If I remember correctly somebody did write an extension for CardLayout to support transition effects. Try a search in the extensions forum.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      0  

    Default

    I stink it was animal.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,853
    Vote Rating
    87
      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!
    Longtime Sencha engineer. Now surplus to requirements apparently...

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Location
    Mainz
    Posts
    241
    Vote Rating
    1
      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 User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,853
    Vote Rating
    87
      0  

    Default

    I guess it should be this.activeItem.hide
    Longtime Sencha engineer. Now surplus to requirements apparently...

  7. #7

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    44
    Vote Rating
    0
      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
      0  

    Default

    DId you check for trailing commas?

  10. #10
    Ext User
    Join Date
    Jan 2009
    Posts
    44
    Vote Rating
    0
      0  

    Default

    Good call.

    Removed trailing comma from:

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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •