PDA

View Full Version : Docked tabBar Button not displaying as expected



salon software stephen
7 Feb 2011, 12:02 PM
Hi,

We're having some problems with a docked refresh button that we've created not displaying properly.

The button is showing in the correct location, at the correct size and is functioning but for some reason it doesn't want to display the refresh icon for us and is displaying as pale grey.

Like this:
http://img155.imageshack.us/img155/1904/iconmissing.png

We've used a method similar to what is shown in the geotweets app. We create a reference to the tabBar we want to work with, then addDocked to apply the button.

Here's the tabPanel that we're working with:



// APP PANEL

app_panel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
tabBar:
{
dock: 'bottom',
layout:
{
pack: 'left'
}
},
centered: true,
items: [bookings, clients, more]
});


Here is our attempt to dock the button to the tabBar:


var tabBar = app_panel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});


Thanks for any help you can offer.

salon software stephen
7 Feb 2011, 1:26 PM
Got it partly fixed.

Adding:
iconMask: true,

To the addDocked statement has made it now display the icon correcly.

Now I just need to stop it from showing as a grey icon (and adjust the button height a bit).

pompair
3 May 2011, 7:19 AM
I also have problems with button alignment within a tabbar.
If I add it like this:




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {

var panel, timeline, mapPanel;

timeline = {
title: "Timeline",
html: "a list of local twits"
}

mapPanel = {
title: "Map",
html: "map area"
}

panel = new Ext.TabPanel(
{
fullscreen: true,
animation: 'slide',
tabBar:
{
dock: 'top',
layout:
{
pack: 'left'
}
},
centered: true,
items: [timeline, mapPanel]
});

var tabBar = panel.getTabBar();
tabBar.addDocked({
dock: 'right',
xtype: 'button',
dock: 'right',
ui: 'dark',
iconCls: 'refresh',
stretch: true,
align: 'center',
iconMask: true
});
}
});



It will work ok and align nicely, but if I add it with ui-property 'plain' then the button will be too much towards the top (too high). Anyone have similar issue? What's the fix

pom

kanika.sud
9 Nov 2014, 11:34 PM
where are you adding getTabBar()