PDA

View Full Version : Custom Tab Panel Theme With Designer 2.0 and Ext JS 4



nealbrandi
19 Feb 2012, 11:22 AM
I'm building a relatively complex client MVC application with multiple primary pages. The wire frames define an Apple (http://www.apple.com) 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:
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?
For the bar component, which is preferred, a Tool Bar or aTab Bar and why?
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
21 Feb 2012, 6:47 PM
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
31 Oct 2012, 10:56 PM
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
1 Nov 2012, 11:26 AM
check to see if flex: 1 is set, if so remove the flex and then add your height

aconran
1 Nov 2012, 3:43 PM
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
1 Nov 2012, 4:07 PM
Hi!

Thanks for your reply! Here is the image.

Thanks again.39765

aconran
1 Nov 2012, 4:10 PM
so you want the tabstrip to be taller than usual? the height in the top part rather than what it is?

roseg
1 Nov 2012, 4:15 PM
Thanks for the reply.. But I need the flex function for its width so I really need to set its flex to 1.

roseg
1 Nov 2012, 4:21 PM
hi acoran,

yes, that's what I mean.