PDA

View Full Version : [FIXED] TabPanel problem



jairok
25 Oct 2011, 12:11 PM
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
31 Oct 2011, 11:44 AM
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_
11 Nov 2011, 3:53 PM
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
13 Nov 2011, 5:23 AM
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
13 Nov 2011, 4:18 PM
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
13 Nov 2011, 5:23 PM
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
14 Nov 2011, 9:38 AM
I believe Carousel had a similar issue, we'll fix TabPanel.

robl
14 Nov 2011, 3:27 PM
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
14 Nov 2011, 4:39 PM
I'll try to get you an override with this one as soon as I can.

robl
14 Nov 2011, 5:46 PM
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.

robl
14 Nov 2011, 5:49 PM
Thank you! The external link (capture links) issue is equally important as the tab panel fix. I can't have mailto: or tel: or other external links in my Sencha Touch app.


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

Jamie Avins
15 Nov 2011, 9:22 AM
This override should fix the error and the tabs should animate in the proper direction as well:



Ext.override(Ext.tab.Panel, {
doSetActiveItem: function(newActiveItem, oldActiveItem) {
if (newActiveItem) {
var items = this.getInnerItems(),
oldIndex = items.indexOf(oldActiveItem),
newIndex = items.indexOf(newActiveItem),
reverse = oldIndex > newIndex;

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

this.callParent(arguments);

if (newIndex != -1) {
this.getTabBar().setActiveTab(newIndex);
}
}
}
});


This will be part of the next release.

insnet
7 Dec 2011, 7:18 AM
Got the same error with "Ext.NestedList" using PR2