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
    16,114
    Vote Rating
    507
    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
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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
    5
    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!

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