Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-971 in a recent build.
  1. #1
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default Can't destroy a card after the cardswitch (activeitemchange)

    Can't destroy a card after the cardswitch (activeitemchange)


    I usually destroy cards as they become inactive in a card layout.
    I used to use this:
    Code:
    this.on('cardswitch', function (view, newCard, oldCard){
        if(oldCard){
            debugger;
            this.remove(oldCard, true);
        }            
    }, this)
    I tried this with touch 2:
    Code:
    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:
    Code:
    this.on('deactivate',function (){
                debugger;
                this.destroy();
            },this,{delay:500});
    Which works but is fragile, when you are switching rapidly. So its not ideal.
    -->

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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)
    -->

  3. #3
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    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:
    Code:
    me.releasedTimeout = setTimeout(function() {
                me.element.removeCls(me.getPressedCls());
            }, 10);
        },
    -->

  4. #4
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    woops. misread your reply. let me check that. brb
    -->

  5. #5
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    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
    -->

  6. #6
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    Here is the card I am deleting, in case it helps:


    Code:
    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");
        }
    });
    -->

  7. #7
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    This type of issue with animations is something we need to address.
    -->

  8. #8
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    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.
    -->

  9. #9
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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:

    Code:
                                    oldItem.on('hide', function() {
                                        setTimeout(function(){
                                            console.log('destroyed old item')
                                            oldItem.destroy()
                                        }, 100);
                                    });
    Twitter: lylepratt
    -->

  10. #10
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    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'.
    Sencha Touch Lead Architect
    -->