PDA

View Full Version : [CLOSED] Ext.layout.Card -> setActiveItem



tobiu
12 Oct 2011, 12:23 PM
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
12 Oct 2011, 1:07 PM
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
12 Oct 2011, 1:12 PM
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
12 Oct 2011, 1:18 PM
Ok, I'll add this as a ticket so that we can discuss this internally and see what we can do :)

justinKohactive
12 Oct 2011, 1:18 PM
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
12 Oct 2011, 1:20 PM
Thats a nifty little function justin, and might even be something we would want to add to the Viewport class itself. Great suggestion!

justinKohactive
12 Oct 2011, 1:49 PM
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
12 Oct 2011, 1:57 PM
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
12 Oct 2011, 2:13 PM
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
20 Oct 2011, 12:32 PM
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'.

justinKohactive
20 Oct 2011, 12:47 PM
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'.

I too have started passing the target object directly and abandoned the view index thing. Since i have a ref to the views in my controller this pattern works much better, also thanks for the tip on android i will def need that when i go to port this thing to android.

yoh.suzuki
25 Oct 2011, 6:01 PM
Hey guys, I think this will be relevant to you. If you are using a reveal function as described in this thread, you may run into an issue where you will end up on a blank screen when you use reveal to navigate back and forth quickly.

This happens because you're replacing the animation. It doesn't know how to stop the previous animation. I recommend manually stopping your previous animation before swapping out your animation. :)

Here's what I'm using:


reveal: function(target, animation) {
var l, anim;
(l = this.getLayout()) && l.getAnimation && (anim = l.getAnimation()) && anim.isAnimating && anim.stopAnimation();
animation && l.setAnimation(animation);
this.setActiveItem(target);
}