1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

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

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


    The section of code that this appears around is:

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

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    53
    Answers
    2
    Vote Rating
    0
    paul_todd is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    That actually does help.

    How do I use the layout attribute though?

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    suppose you have a card layout panel

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

    Code:
    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


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

    Code:
    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?
    Last edited by marc.gayle; 7 Feb 2012 at 3:38 AM. Reason: Updated syntax

  6. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  7. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    53
    Answers
    2
    Vote Rating
    0
    paul_todd is on a distinguished road

      0  

    Default


    This is one thing I would like to see fixed in Sencha:

    If you attempt to set a layout via the config onto a TabPanel or other container that does not support changing the layout it should flag this as an error and log it appropriatly

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    andreacammarata, thanks for pointing that out.

    I am new to Sencha Touch in general, and was handed the views which were done in ST1.x...which I am now trying to convert to ST2.

    Is there some comprehensive guide, aside from this migrating 1.x to 2.x guide, that can tell me:
    • Which methods/objects have been deprecated and their replacements?
    • What 'gotchas' to look out for when converting?
    • Anything else I need to know.
    For instance, how am I to know that 'TabPanel' widgets now have a 'card' layout type?

    Thanks.

Thread Participants: 2