PDA

View Full Version : Docked toolbar does not slide along with the tabpanel's content (panel)



sench23
13 Jan 2011, 4:29 AM
Hi,

At each TabPanel's tab (item) have a panel with a toolbar docked at the top and some other extjs control (usually panel or a nested list).
Each toolbar has a couple of buttons and each button slides some other content (so tab 'a' has a panel with a 'card' layout, and when clicking on some button on the toolbar, that panel slides some other content.

The problem I have is when switching tabs, that toolbar at the top does not slide along with the content, it just appears there with its buttons (and I need the slide effect, for the user to see when the old buttons are sliding out, and new ones sliding in). All toolbars have the same design (width, color, logo etc), only the buttons are different.

I suppose its some layout problem (but I am not sure where I am doing wrong).

Here is the main UI .js file

var tabPanel = new Ext.TabPanel({
fullscreen: true,
tabBar: { dock: 'bottom', scroll: 'horizontal',
layout: { pack: 'center' }
},
items: [
{ title: tabtitle1,
iconMask: true,
iconCls: 'bookmarks',
items: [_liveNewsLib.getContent()]
},
{ title: tabtitle2,
iconMask: true,
iconCls: 'time',
items: [_videosLib.getContent()]
},
{ title: tabtitle3,
iconMask: true,
iconCls: 'search',
items: [_ratesLib.getContent()]
},
{ title: tabtitle4,
iconMask: true,
iconCls: 'star',
items: [_calendarLib.getContent()]
},
{ title: 'more',
iconMask: true,
iconCls: 'more',
items: [_moreLib.getContent()]}
]
});_liveNewsLib.getContent():


_realTimeNewsToolbar = new Ext.Toolbar({
dock: 'top',
ui: 'light',
height: _settings.ui.defaultTabBarHeight,
defaults: { cls: 'toolbar-button', handler: liveNewsMenuHandler },
items: [
ln_backButton, ln_button1, ln_button2, ln_button3, { xtype: 'spacer' },
{ xtype: 'panel', width: 87, height: 30, html: "<img src='StaticData/Images/dfx_logo2.png' />" }
]
});

_liveNewsLib.getContent = function() {
_liveNewsContainer = new Ext.Panel({
fullscreen: true,
layout:'card',
cardSwitchAnimation:'slide',
items: [_nlRealTimeNews, _nlMarketNews, _nlForecasts],
dockedItems: [_realTimeNewsToolbar]
});

return _liveNewsContainer;
}
_videosLib.getContent():


_videosToolbar = new Ext.Toolbar({
dock: 'top',
height: _settings.ui.defaultTabBarHeight,
ui: 'light',
items: [
vid_backButton, { xtype: 'spacer' },
{ xtype: 'panel', width: 87, height: 30, html: "<img src='StaticData/Images/dfx_logo2.png' />" }
]
});

_videosLib.getContent = function() {
return new Ext.Panel({
fullscreen: true,
layout:'card',
items: [_nlVideos],
dockedItems: [_videosToolbar]
});
}
_ratesLib.getContent():


_ratesToolbar = new Ext.Toolbar({
dock: 'top',
ui: 'light',
height: _settings.ui.defaultTabBarHeight,
defaults: { cls: 'toolbar-button', handler: ratesMenuHandler },
items: [
r_backButton, r_button1, r_button2, r_button3, { xtype: 'spacer' },
{ xtype: 'panel', width: 87, height: 30, html: "<img src='StaticData/Images/dfx_logo2.png' />" }
]
});

_ratesLib.getContent = function() {
_ratesContainer = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [
_nlRatesMajor, _nlExoticsRates, _nlCfdRates
],
dockedItems: [_ratesToolbar]
});

return _ratesContainer;
}
_calendarLib.getContent():


_calendarLib.getContent = function() {
return new Ext.Panel({
fullscreen: true,
layout:'card',
dockedItems: [
new Ext.Toolbar({
dock: 'top',
height: _settings.ui.defaultTabBarHeight,
ui:'light',
items: [
c_backButton,
{ xtype: 'spacer' },
{ xtype: 'panel', width: 87, height: 30, html: "<img src='StaticData/Images/dfx_logo2.png' />" }
]
})
],
items: [
_nlCalendar
]
});
}
_moreLib.getContent():


_moreLib.getContent = function() {
return new Ext.Panel({
fullscreen: true,
layout: { align: 'center', type: 'vbox', pack: 'center' },
dockedItems: [
new Ext.Toolbar({
dock: 'top',
height: _settings.ui.defaultTabBarHeight,
ui:'light',
items: [
{ xtype: 'spacer' },
{ xtype: 'panel', width: 87, height: 30, html: "<img src='StaticData/Images/dfx_logo2.png' />" }
]
})
],
items: [
{ html: '<div class="more-info">For more advanced services, please verify that you are a registered user.<div style="height:30px;">&nbsp;</div></div>' },
{ xtype: 'button', text: 'Sign in to your account' },
{ html: '<div class="more-info"><div style="height:30px;">&nbsp;</div>Or if you are a new user, sign up for your account.<div style="height:30px;">&nbsp;</div></div>' },
{ xtype: 'button', text: 'Sign up for free' }
]
})
};
Any help would be very much appreciated.

- Aleksandar