PDA

View Full Version : Custom styling an Ext.tab.Tab component



incutonez
18 Jun 2014, 8:33 AM
I'm trying to style a Tab, so the background color is orange. I'm using the Sencha SDK to achieve this. I've gotten the styling to work, but if the tab is closable, that's when I run into issues, as I get a warning when I use `sencha app build`. The warning is:


WARNING: @theme-background-image: Theme image not found: images/tab/tab-orange-close.png
on line 18 of Theming-workspace/build/temp/production/CustomTheming/slicer-temp/../../../../../ext/packages/ext-theme-base/sass/etc/mixins/theme-background-image.scss
from line 6 of Theming-workspace/build/temp/production/CustomTheming/slicer-temp/../../../../../packages/custom-theme/sass/src/tab/Tab.scss
from line 810 of Theming-workspace/build/temp/production/CustomTheming/slicer-temp/CustomTheming-example.scss

My tab config looks like this:



items: [{
title: 'Blah',
tabConfig: {
ui: 'orange'
},
closable: true
}


My src/tab/Tab.scss looks like this:



@include extjs-tab-ui(
$ui: $ui-tab2,

$ui-background-color: $ui-tab2-background-color,
$ui-background-color-over: $ui-tab2-background-color-over
);


And my var/tab/Tab.scss looks like this:



$ui-tab2: 'orange';
$orange: mix(red, yellow);
$ui-tab2-background-color: mix(#fff, $orange, 20%);
$ui-tab2-background-color-over: $orange;


Like I said, the orange styling shows up just fine. The problem is the closable icon not appearing, and that's what the warning is trying to tell me, but I'm not sure how I can create an image for this. Do I have to somehow use the slicer?

Gary Schlosberg
20 Jun 2014, 3:36 PM
What versions of ExtJS and Cmd are you using when you see this warning?

incutonez
21 Jun 2014, 6:18 AM
Ext JS 4.2.1 and Cmd 4.0.4.84 (for Mac).