PDA

View Full Version : TabPanel theme bug



jeffbattershall
3 Feb 2014, 9:38 AM
I'm attempting to theme a tab panel using Sencha CMD 3.1.2. I'm finding that if I change any of the SASS variables, the entire theming goes bust - like closable icon will not render. Is it the case that ALL SASS variables must be defined in order to get proper rendering? Here's a sample:


@include extjs-tab-panel-ui(
$ui: 'tabnav',
$ui-tab-background-color: #e4e6e8,
$ui-tab-color-active : #FFFFFF,
$ui-tab-background-color-active: #0096d9,
$ui-tab-background-color-over: #0096d9,
$ui-tab-color : #000000,
$ui-tab-border-color-active: #FFFFFF,
$ui-tab-border-color: #0096d9,
$ui-bar-background-color : #FFFFFF,
$ui-strip-background-color : #e4e6e8,
$ui-tab-border-radius : 0
);

Gary Schlosberg
6 Feb 2014, 12:04 PM
In which version of ExtJS are you seeing this issue?

jeffbattershall
6 Feb 2014, 1:13 PM
4.2.1

I worked this over quite a bit and discovered that the close button was expecting an image named resources/images/tab/tab-tabnavigator-close.gif which was not present. 'tabnavigator' is the ui generated by the new mixin so it would appear that this image was supposed to be created in the app build but is not.


@include extjs-tab-panel-ui(
$ui: 'tabnavigator',
$ui-tab-color: #111111,
$ui-tab-border-radius: 0,
$ui-tab-border-width: 1px,
$ui-tab-border-color: #7fceff,
$ui-tab-font-weight: 400,
$ui-tab-inner-border-width: 1px,
$ui-tab-inner-border-color: #7fceff,
$ui-tab-color-over: #b2e1ff,
$ui-tab-color-active: #ffffff,
$ui-tab-background-color-active: #7fceff,
$ui-tab-background-color-over: #0096d9,
$ui-tab-background-color: #e4e6e8,
$ui-bar-background-color:#ffffff,
$ui-bar-border-width:0px,
$ui-tab-closable-icon-height:11px,
$ui-tab-closable-icon-width:11px,
$ui-tab-closable-icon-top:5px,
$ui-tab-closable-icon-right:5px,
$ui-tab-closable-icon-spacing:5px,
$ui-strip-height : 0,
$ui-strip-border-width : 0
);