Ext.layout.Card -> setActiveItem

[tobiu]

this method was really powerful in ST 1, since it had a second param that was not documented:

    /**
     * Sets the active (visible) item in the layout.
     * @param {String/Number} item The string component id or numeric index of the item to activate
     */
    setActiveItem: function(newCard, animation) {

this allowed to use different animations for setting the active card in an easy way.
i used it a lot, since depending on the card where you are you want to modifiy the direction (e.g. slideOut left VS slideOut right).

i _really_ hope you will bring this back. updateAnimation() for the whole layout is definitely not enough.

[TommyMaintz]

The Card layout in ST2 automatically reverses the direction based on the index of the card. We want to avoid having second "animation" arguments to these types of functions.

Any reason updateAnimation is not sufficient?

[tobiu]

hi tommy,

to keep the dom small, i often remove and add cards.
your approach makes sense for tabpanels, but for custom ui design, it was awesome to change the animations just for the transition you want.

+1 for bringing it back

[TommyMaintz]

Ok, I'll add this as a ticket so that we can discuss this internally and see what we can do

[justinKohactive]

all my views are in a viewport and when i switch between cards i proxy it though a reveal function. Below seems the accomplish exactly what I personally was looking for

reveal: function(target, animation) {
             
             var anim = {type: 'flip'};
             if (animation) {
                 anim = animation;
             }
             var tview = this.views[target];
             this.getLayout().setAnimation(anim);
     
             this.setActiveItem(tview);
            
    }

[TommyMaintz]

Thats a nifty little function justin, and might even be something we would want to add to the Viewport class itself. Great suggestion!

[justinKohactive]

No problem,
I'll keep posting my solutions and you can use them in Sencha, just hook me up with some passes to SenchaCon2011

[tobiu]

i tried a similar approach, that is why i opened this ticket

if we want to go this way, I think it is mandatory to set the animation back to its old value after setting the active item.

[justinKohactive]

reveal: function(target, animation) {
             var origanim = this.getLayout().getAnimation();
             var anim = origanim;
             if (animation) {
                 anim = animation;
             }
             var tview = this.views[target];
             this.getLayout().setAnimation(anim);
             this.setActiveItem(tview);
            this.getLayout().setAnimation(origanim); 
    }

This assumes the setActiveItem is a synchronous call.

[yoh.suzuki]

Nice job! I like what you did there. I'm using a modified version of that now, passing in the target object instead of the index. Thanks for sharing.

On a related note, if you are coming to this thread because you are migrating to Sencha Touch 2.0, you may run into the problem on Android phones where it will not respect the 'slide' animation's 'direction'.

This is because in Android, it will use the 'scroll' animation automatically if you specify 'slide'. You can change the direction with 'reverse', but it doesn't respect 'direction'.