View Full Version : Custom Tab UI

4 Sep 2013, 11:15 PM

I'm currently working on creating a custom Ext JS theme for my application using SASS and so far everything is going well. I however cant seem to create custom UI's for several components. I'm for instance creating a custom UI for the first tab button in a tab pane.

I do this by creating the file \extjs-workspace\packages\custom-theme\sass\src\tab\Tab.scss with the following content:

@include extjs-tab-ui(
$ui: 'first-button',
$ui-border-radius: 4px 0px 0px 4px,
$ui-border-width: 0px,
$ui-margin: 0px,
$ui-line-height: 35px,
$ui-color: #555,
$ui-color-over: #ffffff,
$ui-background-gradient: $tabBaseColor,$tabDarkColor,
$ui-background-gradient-over: lighten($tabBaseColor, 5%),lighten($tabDarkColor, 5%),
$ui-background-gradient-active: darken($tabBaseColor, 10%),darken($tabDarkColor, 10%),
$ui-inner-border-width: 0px

My tabpanel config looks like this:

region: 'center',
xtype: 'tabpanel',
plain: true,
border: false,
defaults: {
autoScroll: true
items: [
xtype: 'panel',
tabConfig: {
title: 'First tab',
ui: 'first-button'
xtype: 'panel',
tabConfig: {
title: 'Second tab'



Now when I compile my app and run it in the browser, the CSS of the first button seems to be broken. It does not apply the theme I specified.
Does anyone have any ideas what I could be doing wrong?

Gary Schlosberg
6 Sep 2013, 3:56 PM
Buttons are a bit different than other ui components, and need a scale (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.button.Button-cfg-scale) value. So your second line should look something like:

$ui: 'first-button-small',

12 Sep 2013, 12:14 AM
That did the trick! :). I did however also find that most variables in the mixin are mandatory and don't seem to have default values. You need to be sure all variables have a value otherwise the css will break and you will end up with plain white buttons