TabPanel problem

[jairok]

Hi,

I try to instanciate a custom tabpanel and get this error :

Uncaught TypeError: Object [object Object] has no method 'getAnimation'

Here's the code

Custom tabpanel

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

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 ?

[Jamie Avins]

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?

[dobie_]

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.

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'
            }
        ]
    }
});

[aflx]

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

[olouvignes]

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.

[olouvignes]

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

this.getLayout().getAnimation().setReverse(reverse);

with :

        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.

[Jamie Avins]

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

[robl]

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

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

[Jamie Avins]

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

[robl]

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

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

this.getLayout().getAnimation().setReverse(reverse);

with :

        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.