TabPanel - icons instead of title?

[dragec]

Hi all. In next example, I have one tab panel with 2 tabs. First one also has docked items at bottom:


app = new Ext.Application({
launch : function() {
tabPanel = new Ext.TabPanel({
xtype : "tabpanel",
id : 'tabpanel',
layout: 'card',
renderTo : Ext.getBody(),
fullscreen : true,
activeTab : 0,
layoutOnTabChange : true,
items : [
{iconCls:"minus",
iconMask: true,
dockedItems: [{
dock : "bottom",
xtype : "toolbar",
ui : "dark",
items:[
{
iconCls:"minus",
iconMask: true
},{
iconCls:"plus",
iconMask: true
}
]
}]
},
{
title: 'tab2',
iconMask: true,
iconCls: "plus"
}]
});
}
});



I want to have icons (minus icon) instead of Tab title, but they don't appear. Icons for docked items in first tab work ok, they are shown.

So, is it possible to have icons instead of tab title?

[Saemy]

In your TabPanel

you must apply Items like this:

items: [

{ xtype: 'panel', id: 'plus', iconCls: 'plus' },
{ xtype: 'panel', id: 'minus', iconCls: 'minus' },

]

if you click on plus you you will get to the panel (maybe you can change the 'tap' event then)

but if you want only buttons you should make a TabBar instead of a TabPanel.
I would recommend a TabPanel on the bottom to switch Panels and a TabBar on top for the Buttons Plus and Minus.

a TabPanel is uesed to swich different Panels

You know what i mean?

Saemy

[dragec]

Ok, example with TabBar:


app = new Ext.Application({
launch : function() {

var bar = new Ext.TabBar({
dock: 'top',
ui: 'dark',
items: [{
iconCls: 'home',
iconMask: true
},{
text: 'Tab2'
}]
});


tabPanel = new Ext.Panel({
dockedItems: [bar],
renderTo : Ext.getBody(),
fullscreen : true
});
}
});


Still no button on tabBar.

[Saemy]

Sorry i made a mistake...

I mean toolbar:view in the kitchensink under icons:http://dev.sencha.com/deploy/touch/examples/kitchensink/
(http://dev.sencha.com/deploy/touch/examples/kitchensink/)



dockedItems: [{ xtype: 'toolbar', dock: 'top', defaults: { iconMask: true, }, layout: { pack: 'center' }, items: [{ iconCls: 'action' }, {
iconCls: 'trash' }]
}

[dragec]

This is interresting:


app = new Ext.Application({
launch : function() {
tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark'
},
renderTo : Ext.getBody(),
fullscreen : true,
items: [{
iconCls: 'home'
}]
});
}
});


This code works as expected. But if I change dock property to "top", there is no home icon. Is this expected behaviour?

[Saemy]

I guess you can only use small icons like trash etc. for toolbar...
i think this is correct...