PDA

View Full Version : TabPanel - icons instead of title?



dragec
1 Sep 2011, 11:04 PM
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
2 Sep 2011, 12:28 AM
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
2 Sep 2011, 12:52 AM
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
2 Sep 2011, 1:18 AM
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
2 Sep 2011, 2:06 AM
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
2 Sep 2011, 2:15 AM
I guess you can only use small icons like trash etc. for toolbar...
i think this is correct...