Custom Tab Panel Theme With Designer 2.0 and Ext JS 4

[nealbrandi]

I'm building a relatively complex client MVC application with multiple primary pages. The wire frames define an Apple like menu that enables navigation to each primary page in the app and features 2 specialty views: search and user state (login or identity and logout).

I believe the majority of the navigation behavior is realized in Ext JS 4 as a Tab Panel. My initial thought is to extend Tab Panel to allow specification of my own custom tab bar or tool bar and buttons. I'd need to build custom themes for each part (i.e. x.navigation-button as a sass template). This structure would enable me to override the styles to account for positional variations like border-radius for the first and last components. After reading a lot of documentation and forum postings I have the following questions:

1. Is my intuition correct, is a Tab Panel extension is the correct approach or should I build totally new component? Or this there a better approach?
2. For the bar component, which is preferred, a Tool Bar or aTab Bar and why?
3. Can a custom theme be defined for a Tab Bar?

Any advice and / or pointers to articles, tutorials or reference code is great appreciated. Thanks.

[aconran]

1) Would need some screenshots or mockups but seems reasonable.
2) Again back to 1. Either or would probably work though
3) Yes of course

[roseg]

Hi there!

I am new to Sencha Architect and I am trying to change the height of each tabs in a tabelPanel and it's driving me nuts! The height just don't change even I've tried all cls and height configuration.. Please help me on this simple thing that I can't figure out how..

Thanks in advance!

Best Regards!

[Mthor]

check to see if flex: 1 is set, if so remove the flex and then add your height

[aconran]

Hi there!

I am new to Sencha Architect and I am trying to change the height of each tabs in a tabelPanel and it's driving me nuts! The height just don't change even I've tried all cls and height configuration.. Please help me on this simple thing that I can't figure out how..

Thanks in advance!

Best Regards!

The content of the tab panel or the tab itself? Could you show us some screenshots of waht you are trying to do?

[roseg]

Hi!

Thanks for your reply! Here is the image.

Thanks again.tab_panel_issue.jpg

[aconran]

so you want the tabstrip to be taller than usual? the height in the top part rather than what it is?

[roseg]

Thanks for the reply.. But I need the flex function for its width so I really need to set its flex to 1.

[roseg]

hi acoran,

yes, that's what I mean.