Beta1 - Object has no method 'getAnimation' in Panel.js

[marc.gayle]

The section of code that this appears around is:

var Docs = Ext.create('Ext.TabPanel', {
    id: 'Docs',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        flex: 1,
        itemTpl: '{name}'
    },
    ui: 'Filters',
    items: [{
        xtype: 'list',
        title: 'Tests/Charts',
        store: RefTests,
        listeners: {
            itemtap: function() {
                MyApp.Viewport.setActiveItem('Tests', {type: 'slide', direction: 'left'});
            }
        }
    },{
        xtype: 'list',
        title: 'Statements',
        store: RefStatements,
        listeners: {
            itemtap: function() {
                MyApp.Viewport.setActiveItem('Statements', {type: 'slide', direction: 'left'});
            }
        }
    }],
    dockedItems: [{
        xtype: 'toolbar',
        cls: 'Secondary',
        dock: 'bottom',
        items: [{
            xtype: 'button',
            text: 'Close',
            handler: function() {
                MyApp.Viewport.setActiveItem('Dashboard', {type: 'slide', direction: 'down'});
            }
        }]
    }],
    listeners: {
        activate: function() {
            ToolbarGlobal.setTitle('Docs');
        }
    }
});

The bolded line is the line my JS debugger is telling me that the error is being generated around.

The app I am working on was initially written for ST1, and I am converting it to ST2 (beta release).

I am a ST n00b though, so trying to work my way through it.

Thoughts?

Edit1: For what it's worth, it says the error occurs on line 163 in Panel.js.

[paul_todd]

Try commenting out the layout portion of the panel and see if that helps

[marc.gayle]

That actually does help.

How do I use the layout attribute though?

[AndreaCammarata]

suppose you have a card layout panel

var pnl = Ext.widget('panel',{
	layout: {
        type: 'card',
        animation: {
	        type: 'flip'
        }
	},
	items: [
	    {
		    xtype: 'container',
		    html: 'First Panel'
	    }
	]
});

To set another panel as active changing the transition animation you should write

pnl.getLayout().setAnimation({
    type: 'slide',
    duration: 1000	
});


pnl.setActiveItem(pnl2);

This will allow you to first change your panel layout animation and then set the new wanted active item.

[marc.gayle]

I am not sure that I am doing this right, because that doesn't work for me...so this is what I am doing:

var Docs = Ext.create('Ext.TabPanel', {
    id: 'Docs',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        flex: 1,
        itemTpl: '{name}'
    },
    ui: 'Filters',
    items: [{
        xtype: 'list',
        title: 'Tests/Charts',
        store: RefTests,
        listeners: {
            itemtap: function() {
                Docs.getLayout().setAnimation({
                    type: 'slide',
                    direction: 'left'
                });                
                MyApp.Viewport.setActiveItem('Tests');
            }
        }
    },{
        xtype: 'list',
        title: 'Statements',
        store: RefStatements,
        listeners: {
            itemtap: function() {
                Docs.getLayout().setAnimation({
                    type: 'slide',
                    direction: 'left'
                });
                MyApp.Viewport.setActiveItem('Statements');
            }
        }
    }],
    dockedItems: [{
        xtype: 'toolbar',
        cls: 'Secondary',
        dock: 'bottom',
        items: [{
            xtype: 'button',
            text: 'Close',
            handler: function() {
                Docs.getLayout().setAnimation({
                    type: 'slide',
                    direction: 'down'
                });
                MyApp.Viewport.setActiveItem('Dashboard');
            }
        }]
    }],
    listeners: {
        activate: function() {
            ToolbarGlobal.setTitle('Docs');
        }
    }
});

What am I missing?

[AndreaCammarata]

You are trying to set a "vbox" layout type on a TabPanel.
TabPanel widgets have a "card" layout type by default.

The setAnimation method works only on Panels or TabPanel which have "card" layout type.
From your code I also see some other things that are not going to work on B1, like "dockedItems" for instance.