View Full Version : App header with logo , tabar and toolbar in row

12 Feb 2013, 10:08 PM
Hi guys,

I want your advice on how to make this kind of layout as I'm struggling since couple of weeks now


There is 2 ways I found (but no necessarily implemented) :
1- mess-up with tabbar plugins in order to dock some components left and right
2- a combination of card layout and toolbar buttons to switch tabs..

What's your opinion ?

Thanks in advance.

12 Feb 2013, 11:05 PM
Second one would be easier IMO. You can use a tab bar independently of the tab panel and just handle the card changes yourself.

12 Feb 2013, 11:42 PM
Thanks evant,
Do I need to reinvent the wheel that will have an old cassette player buttons behavior ? that means a toggle button will pop others !
Do you know of any existing example (laziness) ?

22 Feb 2013, 8:54 PM
Well , Extjs really sucks when it comes to customization (no offence here)
I tried putting ul li menu but could not catch events of plain DOM elements
I tried putting a bunch of xtype:button with toggleGroup again, no luck with CSS (IE8 problems)
I tried putting a managed xtype:box with autoEl of DIVs again messed up with styling


23 Feb 2013, 12:55 AM
OK, seems <nobody> is initerested in my issue. Let's make this thread a diary notesB)

I have tried to wrap div ul li elements as Ext-ized components :

{xtype: 'container',flex:1, autoEl: 'div', cls:'cf',
{xtype: 'container', id:'nav', autoEl: 'ul',
{xtype: 'box', id:'item1',autoEl: 'li', cls: 'first', html:'<a href="#"><i class="icon-dashboard icon-2x"></i><span class="icon">Dashboard</span></a>',
listeners : {click: function() {debugger;this.fireEvent('menuitem');}}
{xtype: 'box',autoEl: 'li', html:'<a href="#"><i class="icon-sitemap icon-2x"></i><span class="icon">Explorer</span></a>'},
{xtype: 'box',autoEl: 'li', html:'<a href="#"><i class="icon-globe icon-2x"></i><span class="icon">GIS</span></a>'},
{xtype: 'box',autoEl: 'li', cls: 'last', html:'<a href="#"><i class="icon-cogs icon-2x"></i><span class="icon">Administration</span></a>'}

now I want to capture click events of box components ?????????????