PDA

View Full Version : Custom UI Compass Compile Warnings with Docs Example (Theme image not found).



Izhaki
29 Jun 2012, 2:46 AM
ExtJS 4.1;

I've followed this docs guide on theming (http://docs.sencha.com/ext-js/4-1/#!/guide/theming), and managed to compile my css successfully.

However, when I try to add the custom UI as described in the docs, I get the following errors (I'm only showing 2 out of about 18):



WARNING: @theme-background-image: Theme image not found: ../../extjs/resources/themes/images/default/panel/panel-bubble-corners.gif
on line 18 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss
from line 391 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss
from line 64 of /Library/WebServer/Documents/v4/resources/sass/my-ext-theme.scss


WARNING: @theme-background-image: Theme image not found: ../../extjs/resources/themes/images/default/panel/panel-bubble-sides.gif
on line 18 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss
from line 391 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss
from line 64 of /Library/WebServer/Documents/v4/resources/sass/my-ext-theme.scss

...


It seems that compass is looking for an image with the name panel-bubble-corners.gif, although clearly such won't exist.

What am I doing wrong?

My my-ext-theme.scss:



// Unless you want to include all components, you must set $include-default to false
// IF you set this to true, you can also remove lines 10 to 38 of this file
$include-default: false;


// Insert your custom variables here.
// $base-color: #aa0000;


@import 'ext4/default/all';


// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-fieldset;
@include extjs-form-file;
@include extjs-form-checkboxfield;
@include extjs-form-checkboxgroup;
@include extjs-form-triggerfield;
@include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;


// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
// The value can either be true, in which case the image path will be "../images/"
// or a string, of where the path is
$relative-image-path-for-uis: true; // defaults to "../images/" when true


@include extjs-panel-ui(
'bubble',

$ui-header-font-size: 12px,
$ui-header-font-weight: bold,
$ui-header-color: #0D2A59,
$ui-header-background-color: #fff,
$ui-header-background-gradient: null,

$ui-border-color: #fff,
$ui-border-radius: 4px,
$ui-body-background-color: #fff,
$ui-body-font-size: 14px
);

Izhaki
29 Jun 2012, 4:33 AM
OK, I had to patch utils.rb and create manifest.js (as described in this thread (http://www.sencha.com/forum/showthread.php?173528-Slicer-help-for-custom-UI-image-creation&p=845957#post845957)).

But I still get these errors:



WARNING: @theme-background-image: Theme image not found: ../images/panel-header/panel-header-bubble-collapsed-top-corners.gif
on line 18 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss
from line 472 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss
from line 64 of /Library/WebServer/Documents/v4/resources/sass/my-ext-theme.scss