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
);
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
);