PDA

View Full Version : [FIXED] Can't destroy a card after the cardswitch (activeitemchange)



simeon
3 Nov 2011, 8:43 AM
I usually destroy cards as they become inactive in a card layout.
I used to use this:


this.on('cardswitch', function (view, newCard, oldCard){
if(oldCard){
debugger;
this.remove(oldCard, true);
}
}, this)



I tried this with touch 2:


this.on('activeitemchange', function (view, newCard, oldCard){
if(oldCard){
debugger;
this.remove(oldCard, true);
}
}, this)


the event now fires before the switch and throws an exception because its interacting with the card that gets removed during the animation. So the oldCard can't be removed until the animation is complete.

We really need an afteractiveitemswitch event to do the oldCard removal

I tried this on the card that gets removed instead:


this.on('deactivate',function (){
debugger;
this.destroy();
},this,{delay:500});



Which works but is fragile, when you are switching rapidly. So its not ideal.

Jamie Avins
3 Nov 2011, 8:59 AM
Indeed it is async, does doing this have any effect?:

this.onAfter('activeitemchange', function (view, newCard, oldCard){
if(oldCard){
debugger;
this.remove(oldCard, true);
}
}, this)

simeon
3 Nov 2011, 10:46 AM
yes, it deletes the old card and then throws two js errors.

Errors:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
Element.js 493

Uncaught TypeError: Cannot call method 'removeCls' of null
Button.js:545

I suspect the errors relate to the updating of the button that triggered the card switch. The code attempts to update the css on the button after the container that owns it is deleted.

The second error was in this code:


me.releasedTimeout = setTimeout(function() {
me.element.removeCls(me.getPressedCls());
}, 10);
},

simeon
3 Nov 2011, 10:49 AM
woops. misread your reply. let me check that. brb

simeon
3 Nov 2011, 10:52 AM
tried onAfter but it had errors as well

Errors:
Uncaught TypeError: Cannot call method 'removeCls' of null
Button.js:545


Uncaught TypeError: Cannot read property 'style' of null
Css.js:177

simeon
3 Nov 2011, 10:56 AM
Here is the card I am deleting, in case it helps:




Ext.define( 'MG.view.Home', {
extend: 'Ext.Panel',
xtype: "home",
config :{
layout: 'vbox',
title: "home panel",
iconCls: "home"
},
initialize: function () {
var items = [{
xtype: "toolbar",
cls: "mg-app-toolbarlogo",
dock: 'top',
items: [
{ xtype: 'spacer' },
{ xtype: 'component', html: 'TacScore', cls: "x-title" },
{ xtype: 'spacer' }
]
}, {
xtype: "panel",
title: "home panel",
flex: 1,
html: "background graphic in center of this panel"
}, {
xtype: "panel",
height: 60,
margin: "10 0 20 0",
defaults: {
xtype: 'button',
iconMask: true,
margin: 5
},
layout: {
type: 'hbox',
pack: 'center',
iconAlign: 'top'
// Note: due to a bug in touch 2 pr1 the iconAlign config is non functional.

},
items: [{
text: "Scoring",
handler: this.showMatches,
scope: this,
iconCls: 'organize'
}, {
text: "Leaders",
handler: this.showLeaders,
scope: this,
iconCls: 'star'
}, {
//text:"About",
handler: this.showAbout,
scope: this,
iconCls: 'settings'

}]
}];

this.setItems(items);
this.addEvents('showAbout', 'showLeaders',"showMatches");
this.callParent(arguments);
},
showAbout:function (){
this.fireEvent("showAbout");
},
showMatches:function (){
this.fireEvent("showMatches");
},
showLeaders:function (){
this.fireEvent("showLeaders");
}
});

Jamie Avins
3 Nov 2011, 11:31 AM
This type of issue with animations is something we need to address.

simeon
3 Nov 2011, 11:50 AM
yes. I have seen several other threads in which people were needing callbacks on completion of the animation. That appears to be the issue here.

lylepratt
17 Jan 2012, 7:05 PM
Just throwing in my 2 cents. I'm also experiencing this issue. I'm temporarily getting around it by removing the panel after a short timeout. It's ugly, so hopefully there will be a better way to do this in the future:



oldItem.on('hide', function() {
setTimeout(function(){
console.log('destroyed old item')
oldItem.destroy()
}, 100);
});

Jacky Nguyen
18 Jan 2012, 4:26 PM
This has been fixed for the next release.

The default order of event listeners is now 'after' instead of 'before', which means all listener callbacks by default will now be invoked after the actions have been taken. Therefore, in the case of 'activeitemchange' event, the listeners will now be called at the end of animation, and you can safely destroy the 'oldItem'.

ratmat2000
25 Jan 2012, 3:02 PM
Having the same problem and using setTimeout delay as a workaround.

jakobgrannas
8 Feb 2012, 6:33 AM
This is still an issue in B1.

This works:


this.onAfter('activeitemchange', this.onActiveItemChange, this);
...
onActiveItemChange: function(scope, newCard, oldCard, eOpts) {
if(oldCard) {
oldCard.destroy();
}
}


But if I remove 'After' from this.onAfter, it removes the card prematurely and throws an error.

geekflyer
8 Feb 2012, 9:24 AM
Maybe this helps to any of you guys:
Since ST2 B1 you can remove an item from a card layout with animation.
In case you pass as the second parameter "true", the removed item will be destroyed automatically.
I'm using the code below in one of my controllers, which removes my View called "Workspace" and destroys it with animation. It also switches back automatically to the item which was active before, in my case the Login View. (so i don't call setActiveItem()).



this.getViewport().remove(this.getWorkspace(), true);

jakobgrannas
9 Feb 2012, 7:08 AM
Maybe this helps to any of you guys:
Since ST2 B1 you can remove an item from a card layout with animation.
In case you pass as the second parameter "true", the removed item will be destroyed automatically.
I'm using the code below in one of my controllers, which removes my View called "Workspace" and destroys it with animation. It also switches back automatically to the item which was active before, in my case the Login View. (so i don't call setActiveItem()).



this.getViewport().remove(this.getWorkspace(), true);


Thanks, but that doesn't help as it is the timing of the removal that is the problem, not the removal itself.

Jamie Avins
9 Feb 2012, 9:01 AM
Unfortunately this thread is littered with different cases and incomplete examples where we can no longer determine what the remaining issue is. I'm going to close this thread and if someone can please post a complete and reproducible test case which shows the issue we will be more than happy to address it.