PDA

View Full Version : Using Icons in dockedItem



ssdesign
29 Jun 2010, 9:30 AM
Hi,
I have an Ext.Panel with x-type:'toolbar' as a dockecItem.

Here is my code:

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [{
html: 'nn',
cls: 'bg'
}, {
title: 'Tab 2',
html: '2',
cls: 'bg'
}, {
title: 'Tab 3',
html: '3'
}]
});



new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{,
text: 'something',
iconCls: 'info'
}]
}],
items: [carousel1]
});
}
});

My question is, can I use Icons for the items in the toolbar instead of just text?

I have noticed that Icons can be used in tabPanel (using "iconCls") but I am not sure how can I add icons in a toolbar.

Any advice is greatly appreciated.

Can defaultType be used here? If so, how to use it?

Thanks

ssdesign
29 Jun 2010, 9:54 AM
got it...

Had to use:


dockedItems: [{
xtype: 'toolbar',
dock: 'top',
defaults: {
ui: 'mask'
},

items: [
{ iconCls: 'compose'},
{xtype: 'spacer'},
{ iconCls: 'attachment'},
{xtype: 'spacer'},
{ iconCls: 'add'}
]
}],