Destroy view on deactivate + animateActiveItem on Viewport

[marcos.td]

Hello,

I am new with Sencha Touch, so it may be a silly question. I am dynamically creating the views to insert in the Viewport, but I'd like to destroy them when they are not active anymore. They problem is that I am switching views with the function animateActiveItem(), and when I add on the listener "deactivate" to destroy the view, the animation doesnt happen, because the view is destroyed before the animation finish. I tried many things to solve it, but nothing really worked, one of the things I tried was basically this:

Ext.Viewport.animateActiveItem(newView, {
  type: 'slide',
  direction:  'right',
  listeners: {
    animationend: function() {
      var items = Ext.Viewport.getItems().items;
      for (var i in items) {
        if (items[i].isHidden() === true) {
          items[i].destroy();
        }
      }
    }
  }
});

It didn't work because it made the app run slower, so sometimes the the app locks up for a second and it causes a bunch of problems. Anyway I think I shouldn't need to do it, there might be a better option. I also tried setting a timeout to destroy the view, but it does not work if the user switches screens too fast.

Anyone of you guys have an idea of how can I destroy the views after they're deactivated, but keeping the animation?

Thanks!

[mitchellsimoens]

What happens when you add an activeitemchange event to the Ext.Viewport?

Ext.Viewport.onAfter('activeitemchange', function() {...});

[jerome76]

I've gotten around this issue by using Ext.defer. My animations are set at about 250ms and i defer my destroy call by 300ms to let the animations finish before destroying the page.

[rkraus]

THX GOD jerome76 !
You are my hero of the day!!!


ps: 1976 ist best year ever haha

[mitchellsimoens]

I've gotten around this issue by using Ext.defer. My animations are set at about 250ms and i defer my destroy call by 300ms to let the animations finish before destroying the page.

That's not a very solid way to do it though. What if your device slows down and the anims just happen to take 305ms to complete? Might as well listen to the transition end event on the element for that then

[jerome76]

That's not a very solid way to do it though. What if your device slows down and the anims just happen to take 305ms to complete? Might as well listen to the transition end event on the element for that then

Never thought about that. I've really only been working with the iPad so I've never experienced speed issues

[rkraus]

Is there a transition end event in Sencha ?

[mitchellsimoens]

What you need to do is change the order of things...

cmp.onAfter('deactivate', function() {});

I usually use this on the container that has card layout on it:

container.onAfter('activeitemchange', function() {});