PDA

View Full Version : Right aline a button in a toolbar



meyerovb
29 Jun 2010, 9:36 PM
How do I right align a button in a toolbar? Below is my script:

var toolbar = { xtype: 'toolbar', items: [{ xtype: 'button', ui: 'mask', iconCls: 'settings'}] };

I need the title to come up centered and correctly formatted, hence the toolbar. I tried inserting the button as a right docked item, but apparently docked items don't appear in toolbars.

ssdesign
29 Jun 2010, 10:02 PM
try this:


var toolbar = { xtype: 'toolbar', items: [{xtype: 'spacer'}, { xtype: 'button', ui: 'mask', iconCls: 'settings'}] };

ssdesign
29 Jun 2010, 10:05 PM
btw. Icons can appear in DockedItem.

Read this thread: http://www.sencha.com/forum/showthread.php?102847-Using-Icons-in-dockedItem

meyerovb
29 Jun 2010, 10:11 PM
Adding a spacer did it, thanks.When I said docked item not showing up, I meant with the following code:
{ xtype: 'toolbar', dockedItems: [{ xtype: 'button', ui: 'mask', iconCls: 'settings', dock: 'right', stretch: false, align: 'center'}] }

ssdesign
29 Jun 2010, 10:37 PM
So far I have only managed to get the following icons working inside dockItems:


{ iconCls: 'action' },
{ iconCls: 'add' },
{ iconCls: 'attachment' },
{ iconCls: 'bookmarks' },
{ iconCls: 'bolt' },
{ iconCls: 'chat' },
{ iconCls: 'compose' },
{ iconCls: 'delete' },
{ iconCls: 'home' },
{ iconCls: 'locate' },
{ iconCls: 'maps' },
{ iconCls: 'organize' },
{ iconCls: 'refresh' },
{ iconCls: 'reply' },
{ iconCls: 'search' },
{ iconCls: 'tag' },
{ iconCls: 'trash' }

TommyMaintz
30 Jun 2010, 8:38 AM
There were some incorrect rules in our CSS. We are currently uploading a new release of the beta that will fix this.

meyerovb
30 Jun 2010, 4:43 PM
Using .91, no icons show up in the following screen:



Ext.setup({onReady: function () {
new Ext.Panel({ fullscreen: true,
items: [{ xtype: 'toolbar', dockedItems: [{ xtype: 'button', ui: 'mask', iconCls: 'settings', dock: 'right', stretch: false, align: 'center'}]}]
});
new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom' }, defaults: { ui: 'mask' },
items: [{ iconCls: 'reply', title: 'reply' }, { iconCls: 'chat', title: 'chat' }, { iconCls: 'chat', title: 'search'}]
});
}});

TommyMaintz
30 Jun 2010, 5:52 PM
I dont know if this is an error somewhere in the documentation, but we dont have reply nor chat icons for tabs.
Looking at the css these are the available tab iconCls options.

bookmarks
download
favorites
info
more
search
time
user
team
settings

The settings icon works for me on the button in the toolbar. Note that docking the button to the right of the toolbar is not the preferred solution. We only did this in the guide because we were adding it to a TabBar, and we didnt want to button to be part of the items (and thus tabs) collection.

P.s. You might want to add some spacing to make your code more readable. E.g.



new Ext.Panel({
fullscreen: true,
items: [{
xtype: 'toolbar',
items: [{xtype: 'spacer'}, {
xtype: 'button',
ui: 'mask',
iconCls: 'settings'
}]
}]
});

new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [...your tabs here...]
});

meyerovb
30 Jun 2010, 5:57 PM
Kitchen sink > user interface > icon demo in .91:

iconCls: 'chat'

And a whole bunch more not in your list

TommyMaintz
30 Jun 2010, 6:13 PM
There are two sets of icons. One is for buttons inside a toolbar, and the other is for tabs in a tabbar. The ones I listed are all the available icons specifically for tabs. We should probably make this more clear in the example and documentation.
I think the reason that they can not be shared is because tab icons are a different size then toolbar button icons. It do agree though that it would be nice if you could use every iconCls on both buttons and tabs.

meyerovb
30 Jun 2010, 6:22 PM
I think that's a very important feature, being able to use these icon styles in either buttons as well, I can't embed a tab into a list...

Please keep us up to date on this issue, as well as additional icons you may be adding in, thanks!

TommyMaintz
30 Jun 2010, 6:23 PM
We will discuss this and see what we can do. I'll keep you posted. Thanks for the testing!

ssdesign
30 Jun 2010, 8:12 PM
Would it mean just adding CSS and a different size Icons?

Maybe we can add a community project to create a beautiful set of Icons.

Alternatively, might be a good idea if we can have these icons as part of some kind of skinning templete.