Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1032 in a recent build.
  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    68
    Vote Rating
    -1
    jairok is an unknown quantity at this point

      0  

    Exclamation TabPanel problem

    TabPanel problem


    Hi,

    I try to instanciate a custom tabpanel and get this error :
    Code:
    Uncaught TypeError: Object [object Object] has no method 'getAnimation'
    Here's the code

    Custom tabpanel
    Code:
    Ext.define('app.view.MainTabPanel', {
        extend : 'Ext.tab.Panel',
        xtype : 'mainTabPanel',
        id : 'mainTabPanel',
    
        config : {
            layout : 'fit',
            ui : 'glossy',
            tabBarPosition : 'bottom',
    
            items : [ {
                title : '1',
                html : '1'
            }, {
                title : '2',
                html : '2'
            } ]
        }
    });
    the container of this tabpanel
    Code:
    Ext.define('app.view.Main', {
        extend : 'Ext.Panel',
    
        requires : [ 'app.view.MainToolbar', 'app.view.MainTabPanel' ],
    
        config : {
            fullscreen : true,
            layout : 'fit',
            ui : 'glossy',
            tabBarPosition : 'bottom',
    
            items : [ {
                xtype : 'mainToolbar',
                docked : 'top'
            }, {
                xtype : 'mainTabPanel',
            } ]
        }
    });
    The mainview is called by the controller


    anyone ?

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    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


    You wouldn't want to define an id of a class you are going to instantiate. The mainToolbar xtype is fine, but what is mainTabPanel?

  3. #3
    Sencha User dobie_'s Avatar
    Join Date
    Sep 2011
    Location
    Seattle, WA
    Posts
    47
    Vote Rating
    0
    dobie_ is on a distinguished road

      0  

    Default


    jairok: I ran into this issue as well. Have a look at app/view/BottomTabs.js in the Kitchen Sink example for a working demo of Ext.tab.Panel.

    Code:
    Ext.define('Kitchensink.view.BottomTabs', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            activeTab: 0,
            layout: {
                animation: {
                    type: 'slide',
                    duration: 250
                }
            },
            tabBar: {
                layout: {
                    pack : 'center',
                    align: 'center'
                },
                docked: 'bottom',
                scrollable: {
                    direction: 'horizontal',
                    indicators: false
                }
            },
            items: [
                {
                    title    : 'About',
                    html     : '<p>Docking tabs to the bottom will automatically change their style. The tabs below are ui="light", though the standard type is dark. Badges (like the 4 below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
                    iconCls  : 'info',
                    cls      : 'card card1'
                },
                {
                    title    : 'Favorites',
                    html     : 'Favorites Card',
                    iconCls  : 'favorites',
                    cls      : 'card card2',
                    badgeText: '4'
                },
                {
                    title    : 'Downloads',
                    id       : 'tab3',
                    html     : 'Downloads Card',
                    badgeText: 'Text can go here too, but it will be cut off if it is too long.',
                    cls      : 'card card3',
                    iconCls  : 'download'
                },
                {
                    title    : 'Settings',
                    html     : 'Settings Card',
                    cls      : 'card card4',
                    iconCls  : 'settings'
                },
                {
                    title    : 'User',
                    html     : 'User Card',
                    cls      : 'card card5',
                    iconCls  : 'user'
                }
            ]
        }
    });

  4. #4
    Sencha User aflx's Avatar
    Join Date
    Jun 2011
    Location
    Berlin, Germany
    Posts
    64
    Vote Rating
    0
    aflx is on a distinguished road

      0  

    Default


    Hi,
    today I figured out, that you get this error, if you instantiate a panel without items too (when you want to add some later)! So, you always have to specify at least one item... I think, this is a bug!?

    Bye,
    Alex

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Vote Rating
    3
    olouvignes is on a distinguished road

      0  

    Default


    Ran into this also.
    This is clearly a bug, worked fine on PR1.

    Can't use PR2 because of this. breaks everything.
    Need a patch badly.

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Vote Rating
    3
    olouvignes is on a distinguished road

      0  

    Default


    You can replace (around l.54470 in debug-w-comments) :

    Code:
    this.getLayout().getAnimation().setReverse(reverse);
    with :
    Code:
            try { this.getLayout().getAnimation().setReverse(reverse); } catch (e) { console.error('failed to getAnimation()'); }//@fix
    But... Animation are still messed up (nothing to do with this try/catch), there is no more slide-back (right) animation... So sth else is broken.

  7. #7
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    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


    I believe Carousel had a similar issue, we'll fix TabPanel.

    Sencha Inc

    Jamie Avins

    @jamieavins

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Thanks Jamie. Any chance you guys could release this patch along with a patch for the external links issue? PR2 is unusable currently.

    Quote Originally Posted by Jamie Avins View Post
    I believe Carousel had a similar issue, we'll fix TabPanel.

  9. #9
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    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


    I'll try to get you an override with this one as soon as I can.

    Sencha Inc

    Jamie Avins

    @jamieavins

  10. #10
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    After applying your one line patch, my app finally displays. HOWEVER, the tabs do not switch when pressed. Major breakage. I'm desperate for patches...

    Quote Originally Posted by olouvignes View Post
    You can replace (around l.54470 in debug-w-comments) :

    Code:
    this.getLayout().getAnimation().setReverse(reverse);
    with :
    Code:
            try { this.getLayout().getAnimation().setReverse(reverse); } catch (e) { console.error('failed to getAnimation()'); }//@fix
    But... Animation are still messed up (nothing to do with this try/catch), there is no more slide-back (right) animation... So sth else is broken.