Sencha: Togglefield animation not working after “animateActiveItem”

Question

I'm having some trouble with 'togglefield' xtype in Sencha. I've done a lot of testing with different code types and have simplified my application to a few containers. You can see I've added two togglefields - one in the first container "View A" and the other in the "View B" container. For some reason, the first togglefield displays correctly. However, with the second togglefield, the animation does not display correctly.

I've noticed this same problem with larger applications when the application consists of one main container with multiple views that are accessed via "animateActiveItem". In the initial container, the togglefield works, but in the second, the toggle does not animate.

However, if I change the view with "setActiveItem", the toggle works properly in both. I think there is something very simple that I'm missing, but can't tell what. Any ideas?

Code that I'm using to define the view follows:

Ext.define('MyApp.view.mainWindow', {
    extend: 'Ext.Container',

    config: {
        id: 'mainWindow',
        layout: {
            type: 'card'
        },
        items: [
                {
                    xtype: 'container',
                    id: 'viewA',
                    layout: {
                        type: 'vbox'
                    },
                    items: [
                            {
                                xtype: 'container',
                                html: 'CLICK THE BUTTON'
                            },
                            {
                                xtype: 'button',
                                text: 'MyButton',
                                handler: function () {
                                    Ext.getCmp('mainWindow').animateActiveItem(Ext.getCmp('viewB'), {type: 'pop', direction: 'left'});
                                    console.log("pressed");
                                }
                            },
                            {
                                xtype: 'togglefield',
                                label: 'Field'
                            }
                            ]
                },
                {
                    xtype: 'container',
                    id: 'viewB',
                    items: [
                            {
                                xtype: 'togglefield',

                                name: 'toggleName',
                                label: 'My Toggle Field',
                            }
                            ]
                }
                ]
    }

});

Nikola Lajic Nikola Lajic · Accepted Answer · 2013-05-07T10:11:09

I don't know how much can this be applied to your situation, but I've found out that I vas accidentally creating two instances of the view controller that was invoking the animation. One in app.js and one in the profile.

Basically they were interrupting each others animations.

Sencha: Togglefield animation not working after “animateActiveItem”

1 Answers